Skip to content

Instantly share code, notes, and snippets.

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
return (
<SidenavContainer variant={isNavOpen ? 'expanded' : 'collapsed'}>
<Heading as="h2" variant="h1" {...a11yHeadingProps}>
My Blog
<IconButton icon="menu" onClick={toggleNav} {...a11yTargetProps} />
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/blog">Blog</NavLink>
<NavLink href="/contact">Contact</NavLink>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment