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