使用React實現固定導覽列和可折疊固定側邊欄的頁面

Question

我正在嘗試使用 React 和 chakra-ui 元件實現具有固定導覽列和可折疊固定側邊欄的頁面。下面是範例程式碼。

import { Box } 從 "@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 是側邊欄寬度