Create Navigation components

[geraldiner]

Based on Advent of CSS Challenge #7, Challenge #8, and Challenge #9

These navigation components will be used in the NavBar, which only shows when the user is logged in viewing their dashboard or other subpages (ex. Invite Members, Wish List Creation, etc.). See the Figma file for more detailed info.

Hamburger Menu Button

In the top left corner of the page, there should be a hamburger menu button that will toggle the navigation pane open and close.

• When the user clicks on the hamburger menu it should animate from 3 horizontal lines into an X.
• When the user clicks on the hamburger menu again it will animate from a close icon, back into 3 horizontal lines.

Navigation Pane

• This navigation pane should slide over the page content, but not cover the user information in the top right corner.
• The main navigation links at the top are for the Dashboard, Our Event, and My Wish List.

Account Dropdown Menu

• When the user clicks on the “Logged in as” button, a dropdown will appear that includes links for:
  • My Account
  • My Event
  • Logout
• The chevron should change to pointing up.

[dominionworkz]

ok thanks for sharing this. I am still on the JavaScript learning journey Thanks for your patience too