Menu Structure

File: src/components/navbar/desktop-nav.tsx

                    
<nav className={`navbar navbar-expand-lg ${!isScrolled ? "large-navbar" : ""}`}>
  <Container>
    <div className="navbar-brand">
      <Link to="hero" spy={true} smooth={true} offset={0} duration={500}>
        <img src={imagePath + "navbar/logo.png"} alt="logo" height="35" className="pointer" />
      </Link>
    </div>
    <div className={`navbar-toggler ${mobileNavbarOpen ? 'active' : ''}`} onClick={mobileMenuOpen}>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div className={`${mobileNavbarOpen ? 'active' : ''} navbar-collapse navbar-menu`}>
      <ul className="navbar-nav list-unstyled ms-md-auto">
        {
          props.menuItems.map((item: IMenuItem, idx: number) => (
            <li className="nav-item" key={idx}>
              <Link activeClass="active" className="nav-link" to={item?.id} spy={true} smooth={true} offset={-70} duration={500}>
                {item?.text}
              </Link>
            </li>
          ))
        }
      </ul>
    </div>
  </Container>
</nav>