使用React实现固定导航栏和可折叠固定侧边栏的页面

Question

我正在尝试使用 React 和 chakra-ui 组件实现一个具有固定导航栏和可折叠固定侧边栏的页面。下面是示例代码。

import { Box } from "@chakra-ui/react";

export const App = () => {
  return (
    <Box display="flex">
      <Box position="fixed" width="200px" height="100%" bg="red" /> {/* Sidebar */}
      <Box flex="1" position="fixed">
        <Box position="fixed" top="0" width="100%" height="50px" bg="blue" /> {/* Navbar */}
        <Box mt="50px" p="4">
          {/* Rest content */}
        </Box>
      </Box>
    </Box>
  );
};

但是现在顶部导航栏的宽度始终没有达到我的预期。这是它的当前输出。

我想实现以下输出。

红色框是侧边栏，蓝色框是顶部导航栏。预计他们两人都将固定在目前的位置上。请就如何实现我的期望提供一些建议。我将非常感激！

Answer 1

你可以尝试：

<Box position="fixed" top="0" right="0" width="calc(100vh - 200px)" height="50px" bg="blue" /> {/* Navbar */}

注意 200px 是侧边栏宽度