- 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.
- 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}.