• When the menu is hidden we say that the menu has the state is closed. {menuOpen: false}
• When the menu is visible we say that the menu has the state open. {menuOpen: true}
• The default state of the menu is closed {menuOpen: false} when window width is less than 767px.
• When the screen shrinks we hide the menu after it crosses the boundry.

Open/Close Toggle

• The toggle element is added to the DOM when the inner width of the window is less than 767px.
• Clicking the toggle element changes the boolean state of the menu this.setState({menuOpen: !this.state.menuOpen}).
• Increasing window width beyond 766 will trigger menu open {menuOpen: true}.

Closed

• ul.name is removed from DOM. The toggle element is still available when screen size small.
• show-menu removed from element.
• Can only be closed when the width is < 767px.

Open

• show-menu class is added to the element.
• ul.name is added to the DOM.