intro-section

Community feedback

• 

  Marco•320

  @marcoberdianoPosted over 2 years ago

  Hello Marge C. Thanks for your the suggestions. I did exatly what you propose but still have some problems. But i'm working on it, i made some progress.

  1
• 

  P

  Marge C.•440

  @msunjiPosted over 2 years ago

  Heya Marco! I know responsive nav bars aren't always the easiest, so great job on this challenge! 👍

  I checked out your code and this is what I've done for the menu.

  • Instead of using checkSize and the useEffect hook to toggle your menu, you can use CSS classes. In your media query in NavBar.css, set nav-links to display: none, but also create another class called active with display: flex as a declaration. Something like this:

    .nav-links {
      // your other CSS declarations
      display: none;
    }
    .active {
      display: flex;
    }
  

  The idea here is that when you click on the hamburger menu icon, you want to toggle some piece of state which should then set or not set the active class.

  • Add a class to your hamburger icon, then in NavBar.css, set it to display: none on larger screen sizes and display: block on smaller screen sizes. This way the hamburger icon only shows up on smaller screens.
  • In NavBar.jsx, set showMenu's default state to false and then make an event handler handleMobileMenu that toggles the showMenu state value. Then add an onClick event handler to your hamburger icon div and pass handleMobileMenu to it. It'll look something like this:

    const handleMobileMenu = () => {
      setShowMenu(!showMenu);
    };
  
  <div className="hamburger" onClick={handleMobileMenu}>
  // your icon
  </div>
  
  

  • By the way, I imported NavLinks into NavBar.jsx instead of NormalMenu, then revised your code, so the end product looks like this (which I'll explain a bit below):

      <div>
        <nav className="nav-container">
          <div className="logo">
            <img src={logo} alt={logo}></img>
          </div>
          <NavLinks showMenu={showMenu} />
          <div className="hamburger" onClick={handleMobileMenu}>
            <img src={iconMenu} alt={iconMenu}></img>
          </div>
        </nav>
      </div>
  

  • Pass the value of showMenu to your NavLinks component. You'll use this to toggle the active class you made earlier.
  • In your NavLinks component, toggle the class name like so:

  <div className={`nav-links ${showMenu ? 'active' : ''}`}>
  // your code
  </div>
  

  This should sort out your issue for the most part, but for positioning and stuff, I'll leave that to you. Sorry this explanation got super long! If it's not very clear and you have any questions, feel free to reach out to me. Hope this helped!

  0