Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
image08 for component hierarchy post
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>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment