<p>I'm trying to implement a page with a fixed navigation bar and a collapsible fixed sidebar using <strong>React</strong> and <strong>chakra-ui</strong> components. Below is sample code. </p> <pre class="brush:php;toolbar:false;">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> ); };</pre> <p>But now the width of the top navigation bar has never reached my expectation. This is its current output. </p> <p>I want to achieve the following output. </p> <p>The red box is the sidebar, and the blue box is the top navigation bar. Both are expected to remain in their current positions. Please provide some suggestions on how to achieve my expectations. I will be very grateful! </p>

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