Use React to implement fixed navigation bar and collapsible fixed sidebar pages

Question

I'm trying to implement a page with a fixed navigation bar and a collapsible fixed sidebar using React and chakra-ui components. Below is sample code.

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>
  );
};

But now the width of the top navigation bar has never reached my expectation. This is its current output.

I want to achieve the following output.

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!

Answer 1

You can try:

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

Note that 200px is the width of the sidebar