Issue trying to build responsive nav bar

React
1

The issue is i’m trying to build a nav bar that is showing in large screens but on smaller devices it’s collapsed and has a button to expand it. was only showing on small now it’s gone on both. 2 components involved nav bar.tsx and app.tsx shown below. Imports are chakra ui and react usestate.

Nav bar component
const NavBar = () => {
const [isNavOpen, setIsNavOpen] = useState(false);

const handleToggle = () => {
setIsNavOpen(!isNavOpen);
};

return (
<HStack

>

  <Spacer />
  <Button onClick={handleToggle} display={{ base: "block", lg: "none" }}>
    {isNavOpen ? "Close" : "Menu"}
  </Button>
  <Collapse in={isNavOpen} animateOpacity={isNavOpen}>
    <Flex as="nav" direction={{ base: "column", lg: "row" }}>
      <List
        display={{ base: isNavOpen ? "block" : "none", lg: "flex" }}
        alignItems="center"
        spacing=""
      >
        //Nav items
          </Button>
        </ListItem>
      </List>
    </Flex>
  </Collapse>
</HStack>

);
};

App.tsx

<Grid
templateAreas={{
base: "main",
lg: "nav" "main",
}}
>

<GridItem area={“nav”}>


  <GridItem area={"main"}>
    <AboutMe />
    <MyPortfolio />
    <Skills />
    <ContactMe />
  </GridItem>
</Grid>