This is a simple project I've made to show how a hamburger menu works in React Js.
First, I created the project design on the figma platform
I created a folder in component where I will put the files that will be responsible for the menu
In the NavLinks file I put the html of the navigation menu
And I imported this file in both MobileNavigaiton and Navigation. the MobileNavigation file will be responsible for the mobile settings while the Navigation file will be responsible for the web settings.
I import both Mobile Navigation and Navigation files in the Navbar file. The Navbar file will be responsible for rendering both.
In the MobileNavigation file I make use of useState which will tell me the state of the menu.
then I import the images that I will use for the hamburger menu. I created a click event that calls an anonymous function and changes between true and false each time this event is called
I make use of the ternary operator to know if the menu is open or not. if true, show const closeIcon on screen and if false, show const hamburguerIcon instead.
When the hamburger menu is activated, clicking on the navigation menus will not close the menu. To solve this problem I made use of props. I created a function called closeMobileMenu that will pass the value of open to false.
And pass some parameters to the NavLinks file
And I pass these parameters through a click event inside the NavLinks file on each li.
