<Navbar variant={variant} expand="lg" className={`navbar-fixed navbar-default ${className ? className : ''}`}>
  <Container>
    {/* logo */}
    <NextLink href={"/"} passHref>
      <a className="navbar-brand logo">
        <span className="dot"></span>Mono CV
      </a>
    </NextLink>
    {/* navbar toggler */}
    <Navbar.Toggle aria-controls="basic-navbar-nav">
      <span></span>
      <span></span>
      <span></span>
    </Navbar.Toggle>
    {/* menu */}
  
    <Navbar.Collapse id="navbarSupportedContent">
      <ul className="nav navbar-nav ms-auto navbar-center">
        {
          navs.map((item: INavs, idx: number) => (
            <li className="nav-item" key={idx}>
              <ScrollLink activeClass="active" to={item.hash} className="nav-link pe-pointer" spy={true} smooth={true} offset={0} duration={500}>
                {item.text}
              </ScrollLink>
            </li>
          ))
        }
      </ul>
    </Navbar.Collapse>
  </Container>
</Navbar>