Hamburger Menu

1. Install necessary dependencies:

   npm install react-icons

   import React, { useState } from 'react';
   import { GiHamburgerMenu } from 'react-icons/gi'; // Import hamburger menu icon
   import { GrClose } from 'react-icons/gr'; // Import close icon
   import './HamburgerMenu.css';

   const HamburgerMenu = () => {
     const [menuOpen, setMenuOpen] = useState(false);

     const toggleMenu = () => {
       setMenuOpen(!menuOpen);
     };

     return (
       <div className="hamburger-menu">
         {!menuOpen ? (
           <GiHamburgerMenu onClick={toggleMenu} />
         ) : (
           <GrClose onClick={toggleMenu} />
         )}
         {menuOpen && (
           <nav>
             <ul>
               <li>
                 <a href="#home" onClick={toggleMenu}>
                   Home
                 </a>
               </li>
               <li>
                 <a href="#about" onClick={toggleMenu}>
                   About
                 </a>
               </li>
               <li>
                 <a href="#contact" onClick={toggleMenu}>
                   Contact
                 </a>
               </li>
             </ul>
           </nav>
         )}
       </div>
     );
   };

   export default HamburgerMenu;

   .hamburger-menu {
     position: relative;
   }

   nav {
     position: absolute;
     top: 100%;
     left: 0;
     background-color: white;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border-radius: 5px;
     width: 200px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
   }

   ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }

   li {
     width: 100%;
   }

   li a {
     display: block;
     text-decoration: none;
     color: #333;
     padding: 10px 15px;
     transition: background-color 0.2s;
   }

   li a:hover {
     background-color: #f1f1f1;
   }

   import React from 'react';
   import HamburgerMenu from './HamburgerMenu';

   const App = () => {
     return (
       <div>
         <header>
           <HamburgerMenu />
         </header>
         <main>
           {/* Your main app content */}
         </main>
       </div>
     );
   };

   export default App;

Now time to add some Links in for React Router. / Sooo its

BONUS TIME

To add links using React Router in the hamburger menu, you need to update the HamburgerMenu component to include the Link component from the react-router-dom package. Here’s a step-by-step explanation:

Install the react-router-dom package
Import the Link component in the HamburgerMenu component
Replace the menu items with the Link component
Update the main app to use BrowserRouter, Route, and Switch components from react-router-dom

Install the react-router-dom package:

If you haven’t already, install the react-router-dom package using npm or yarn:

   npm install react-router-dom

   yarn add react-router-dom

Import the Link component in the HamburgerMenu component:

In HamburgerMenu.js, import the Link component from react-router-dom:

   import { Link } from 'react-router-dom';

Replace the menu items with the Link component:

In the HamburgerMenu component, replace the menu items with the Link component:

   <ul className="nav-links">
     <li>
       <Link to="/" onClick={toggleMenu}>
         Home
       </Link>
     </li>
     <li>
       <Link to="/about" onClick={toggleMenu}>
         About
       </Link>
     </li>
     <li>
       <Link to="/contact" onClick={toggleMenu}>
         Contact
       </Link>
     </li>
   </ul>

The Link component is used to navigate to different routes within the application. The “to” prop defines the destination route. In this example, we’ve added three links for Home, About, and Contact pages.

Update the main app to use BrowserRouter, Route, and Switch components from react-router-dom:

In your main app file (e.g., App.js), import the necessary components from react-router-dom:

   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

Next, wrap your main app content inside the Router component and define the routes using the Route component inside the Switch component:

   import React from 'react';
   import HamburgerMenu from './HamburgerMenu';
   import Home from './Home';
   import About from './About';
   import Contact from './Contact';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

   const App = () => {
     return (
       <Router>
         <div>
           <HamburgerMenu />
           <main>
             <Switch>
               <Route exact path="/" component={Home} />
               <Route path="/about" component={About} />
               <Route path="/contact" component={Contact} />
             </Switch>
           </main>
         </div>
       </Router>
     );
   };

   export default App;

Make sure you have created the corresponding components (Home, About, and Contact) and imported them in your main app file. The Route components define the routes and their corresponding components to render.

SUper DUper BONUS

There are several cool enhancements you can make to the hamburger menu. Here are a few:
Add smooth transition animations
Change the hamburger icon into an “X” when the menu is open
Use icons for menu items
Add hover effects to menu items
Implement a nested submenu

Add smooth transition animations:

Update the CSS in HamburgerMenu.css to include smooth transitions for opening and closing the menu:

   .nav-links {
     ...
     transition: transform 0.3s ease-in-out;
   }

   .nav-links.open {
     ...
     transition: transform 0.3s ease-in-out;
   }

This will create a smooth sliding effect when opening and closing the menu.

Change the hamburger icon into an “X” when the menu is open:

Update the CSS in HamburgerMenu.css to create an “X” shape for the hamburger icon when the menu is open:

   .menu-btn.open .burger {
     position: fixed;
   }

   .menu-btn.open .burger::before,
   .menu-btn.open .burger::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 3px;
     background-color: #333;
   }

   .menu-btn.open .burger::before {
     transform: rotate(45deg);
   }

   .menu-btn.open .burger::after {
     transform: rotate(-45deg);
   }

When the menu is open, the hamburger lines will form an “X” shape.

Use icons for menu items:

Add icons to the menu items using a library like Font Awesome or Material Icons:

First, install the desired icon library, for example:

   npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Then, import the required icons and library in the HamburgerMenu.js:

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
   import { faHome, faInfoCircle, faEnvelope } from '@fortawesome/free-solid-svg-icons';

Finally, update the menu items with icons:

   <li>
     <Link to="/" onClick={toggleMenu}>
       <FontAwesomeIcon icon={faHome} /> Home
     </Link>
   </li>
   ...

This will display icons next to the menu item text.

Add hover effects to menu items:

Update the CSS in HamburgerMenu.css to include hover effects for menu items:

   .nav-links li a:hover {
     background-color: rgba(0, 0, 0, 0.1);
     color: #333;
   }

When the user hovers over a menu item, the background color will change to provide visual feedback.

Implement a nested submenu:

Add a nested submenu for some of the menu items by updating the JSX and CSS:

In HamburgerMenu.js, add a nested submenu ul element:

   <li>
     <Link to="#" onClick={toggleSubMenu}>
       Services <span>&#x25BE;</span>
     </Link>
     <ul className="sub-menu">
       <li>
         <Link to="/service1" onClick={toggleMenu}>
           Service 1
         </Link>
       </li>
       ...
     </ul>
   </li>

In HamburgerMenu.css, add styling for the submenu:

   .sub-menu {
  display: none;
  list-style: none;
  padding-left: 20px;
  background-color: rgba(255, 255, 255, 0.9);
}

.sub-menu.open {
  display: block;
}

.sub-menu li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

.sub-menu li a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

In HamburgerMenu.js, add a new state and a function to handle the submenu toggle:

const [subMenuOpen, setSubMenuOpen] = useState(false);

   const toggleSubMenu = (e) => {
     e.preventDefault();
     setSubMenuOpen(!subMenuOpen);
   };

Update the className for the submenu ul element to conditionally apply the open class:

   <ul className={`sub-menu${subMenuOpen ? ' open' : ''}`}>

With this, a nested submenu will be displayed under the Services menu item. Clicking on the Services menu item will toggle the submenu’s visibility.

WOOOHHOOOO that’s some Hamburgers. come back next Tuesday.

1. Install necessary dependencies:

2. Create a new functional component for the Hamburger menu, HamburgerMenu.js:

3. Create a CSS file, HamburgerMenu.css, to style the Hamburger menu and its contents:

4. Import and use the Hamburger menu component in your main app, for example, in App.js:

BONUS TIME

SUper DUper BONUS