Exercises

Over the past few years, a common convention has emerged: the hamburger menu.

Clicking or tapping the hamburger icon will open a navigation menu. This pattern is especially common on mobile, but can be found on some desktop sites as well.

Below, you'll find an app with an incomplete hamburger menu. Your job is to finish implementing it, taking care to consider the usability and accessibility of this feature.

Acceptance Criteria:

While the menu is open, focus should be trapped within the modal (you can use the provided FocusLock component).
When the menu is closed, focus should be restored to the last-focused element.
While the menu is open, scrolling should be disabled (you can use the provided RemoveScroll component).
Hitting "Escape" should close the menu.
Clicking the backdrop should close the menu.
The markup should be structured correctly, for screen-reader users. Here are some links to help you out:
- ARIA Menu Button Pattern
- Example HTML implementation

NOTE: We don't want to automatically focus the dismiss button when the menu opens, like we did in the previous “Modals” lesson. We'll discuss in the solution video below.

Code Playground

import React from 'react';

import { Menu } from 'react-feather';

import useToggle from './use-toggle';

import Drawer from './Drawer';

import styles from './Header.module.css';

function Header() {

const [isMenuOpen, toggleIsMenuOpen] = useToggle(false);

return (

<a href="">Kaboom</a>

<div>

<button

className={styles.hamburgerBtn}

onClick={toggleIsMenuOpen}

</button>

{isMenuOpen && (

<li>

</li>

<li>

<a href="">Gallery</a>

</li>

<li>

<a href="">Photographers</a>

</li>

<li>

<a href="">Submit Work</a>

</li>

</ul>

</Drawer>

)}

</div>

</header>

);

}

export default Header;

Solution:

Solution code (success)

// Header.js
import React from 'react';
import { Menu } from 'react-feather';

import useToggle from './use-toggle';
import Drawer from './Drawer';
import VisuallyHidden from './VisuallyHidden';
import styles from './Header.module.css';

function Header() {
  const [isMenuOpen, toggleIsMenuOpen] = useToggle(false);

  return (
    <header>
      <a href="">Kaboom</a>

      <nav role="navigation" aria-label="Main menu">
        <button
          aria-expanded={isMenuOpen}
          className={styles.hamburgerBtn}
          onClick={toggleIsMenuOpen}
        >
          <Menu aria-hidden="true" focusable="false" />
          <VisuallyHidden>Open main menu</VisuallyHidden>
        </button>
        {isMenuOpen && (
          <Drawer handleDismiss={toggleIsMenuOpen}>
            <ul className={styles.navigationList}>
              <li>
                <a href="">Home</a>
              </li>
              <li>
                <a href="">Gallery</a>
              </li>
              <li>
                <a href="">Photographers</a>
              </li>
              <li>
                <a href="">Submit Work</a>
              </li>
            </ul>
          </Drawer>
        )}
      </nav>
    </header>
  );
}

export default Header;

// Drawer.js
import React from 'react';
import { X as Close } from 'react-feather';
import FocusLock from 'react-focus-lock';
import { RemoveScroll } from 'react-remove-scroll';

import styles from './Drawer.module.css';

function Drawer({ handleDismiss, children }) {
  useEscapeKey(handleDismiss);

  return (
    <FocusLock returnFocus={true}>
      <RemoveScroll>
        <div className={styles.wrapper}>
          <div className={styles.backdrop} onClick={handleDismiss} />
          <div className={styles.drawer}>
            <div>{children}</div>
            <button
              className={styles.closeBtn}
              onClick={handleDismiss}
            >
              <Close size={18} aria-hidden="true" focusable="false" />{' '}
              Dismiss
            </button>
          </div>
        </div>
      </RemoveScroll>
    </FocusLock>
  );
}

function useEscapeKey(callback) {
  React.useEffect(() => {
    function handleKeyDown(event) {
      if (event.code === 'Escape') {
        callback();
      }
    }

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [callback]);
}

export default Drawer;

Exercises

Hamburger navigation