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

import { Box } from "@chakra-ui/react"; export const App = () => { return (   {/* Sidebar */}   {/* Navbar */}  {/* Rest content */}    ); };

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

我想实现以下输出。

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