Intro Section with Nav Using React

Community feedback

• 

  Alex Martos P.•280

  @AlexMartosPPosted about 2 years ago

  Great work!

  First of all, you should have href="#", so that the website don't refresh.

  There are som ways you can fix the navbar, you could add a state called "isActive" and when you click a link the state changes with the clicked link for example "Company".

  Then you can do this: <ul classNamse={`nav-list_secondary ${isActive === "Features" ? "open" : ""}`}

  Another way you can do this, is by creating two different states, one for each nav link that have a drop down and then check like above but only checking if "isActive" is true or false.

  If you want to use vanilla JS like as you do, you can do that to. I changed your code so that it should work (not tested):

    const showDropDown = (e) => {
      e.target.nextElementSibling.classList.toggle("open");
    };
  

  Here is my solution if you want to take a look: https://www.frontendmentor.io/solutions/intro-section-with-dropdown-navigation-made-with-reactjs-AUet3fha6z

  Marked as helpful

  0

  ---

  

  Lesley Kimutai•565

  @LeskimPosted about 2 years ago

  @AlexMartosP Thanks Martos ...will try the implementation using state 🤝🏾

  0

  

  Lesley Kimutai•565

  @LeskimPosted about 2 years ago

  @AlexMartosP Working fantastic now(used state) ...just the icons on mobile that I haven't added .... Thanks 🤜🏽

  0