react-menu-component.js

// Vendors
import React, { Fragment, Component } from "react";

// Components
import MenuItem from "../MenuItem/MenuItem.js";

// CSS
import "./Menu.css";

class Menu extends Component {
  constructor (props) {
    super(props);

    this.state = {
      menuVisible: false
    };

    this.showMenu = this.showMenu.bind(this);
    this.hideMenu = this.hideMenu.bind(this);
  }

  showMenu () {
    console.time("Menu open.");

    this.setState({
      menuVisible: true
    }, () => {
      console.timeEnd("Menu open.");
    });
  }

  hideMenu () {
    console.time("Menu close.");

    this.setState({
      menuVisible: false
    }, () => {
      console.timeEnd("Menu close.");
    });
  }

  render() {
    return (
      <>
        <div aria-hidden hidden={this.state.menuVisible ? false : "hidden"} id="menu-overlay" className="menu__overlay">&nbsp;</div>
        <button id="menu-toggle" type="button" className="menu__toggle" onClick={this.showMenu}>
          Menu
        </button>
        <nav id="menu" className={this.state.menuVisible ? "menu menu--visible" : "menu"}>
          <ul className="menu__list">
            <MenuItem key={1} href="/settings-account" label="Account Settings" />
            <MenuItem key={2} href="/settings-profile" label="Profile Settings" />
            <MenuItem key={3} href="/settings-feed" label="Feed Settings" />
            <MenuItem key={4} href="/logout" label="Log Out" />
            <MenuItem key={5} href="/login" label="Log In" />
            <MenuItem key={6} href="/register" label="Register" />
            // This is not a good pattern for a link that triggers behavior, but this component wasn't entirely
            // finished at the time I did the testing for the writeup, so I slapped this in to get things working.
            <li><a href="javascript:void(0);" onClick={this.hideMenu}>Close Menu</a></li>
          </ul>
        </nav>
      </>
    );
  }
}

export default Menu;