我正在尝试实现一个固定导航栏和可折叠固定侧边栏的页面，使用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>
  );
};

但是现在顶部navbar的宽度从来没有达到我的预期，这是它目前的输出。

我想实现以下输出。

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