image08 for component hierarchy post

CollapsibleSideNav.jsx

import { collapseOnEsc } from '../utils/hooks';
import { useSideNav } from './hooks';

const CollapsibleSideNav = () => {
  const { isNavOpen, toggleNav, a11yTargetProps, a11yHeadingProps} = useSideNav();
  // collapse the nav when the ESC key is pressed
  collapseOnEsc();

  return (
    <SidenavContainer variant={isNavOpen ? 'expanded' : 'collapsed'}>
      <Heading as="h2" variant="h1" {...a11yHeadingProps}>
        My Blog
        <IconButton icon="menu" onClick={toggleNav} {...a11yTargetProps} />
      </Heading>
      <Nav>
        <List>
          <ListItem>
            <NavLink href="/">Home</NavLink>
          </ListItem>
          <ListItem>
            <NavLink href="/about">About</NavLink>
          </ListItem>
          <ListItem>
            <NavLink href="/blog">Blog</NavLink>
          </ListItem>
          <ListItem>
            <NavLink href="/contact">Contact</NavLink>
          </ListItem>
        </List>
      </Nav>
    </Box>
  );
}