navbar-bootstrap

import { useState } from 'react'
import { Navbar, Nav, Container, Row, Col } from 'react-bootstrap'

import dynamic from "next/dynamic";

const LinceIconsNoSSr = dynamic(() => import("react-lineicons"), {
  ssr: false,
});

export default function Navigationbar() {
  

  return (
    <div className="navigation fixed-top">
      <Container>
        <Row>
          <Col lg={12}>
            <Navbar className="navigation-bar" expand="lg">
              <Navbar.Brand className="navigation-brand" href="index.html">
                <div className="header-icon">
                <LinceIconsNoSSr name="lni lni-rocket" />
                </div>
                <h4>s</h4>
              </Navbar.Brand>

              <Navbar.Toggle
                className="navigation-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              />

              <Navbar.Collapse className="collapse navigation-collapse" id="navbarSupportedContent">
                <Nav className="navigationBar-nav ml-auto" as="ul">
                <Nav.Link className="navigation-item" href="#home" as="li" ><a className="page-scroll">Home</a></Nav.Link>
                <Nav.Link className="navigation-item" href="#about" as="li"><a className="page-scroll">About</a></Nav.Link>
                <Nav.Link className="navigation-item" href="#services" as="li"><a className="page-scroll">Services</a></Nav.Link>
                <Nav.Link className="navigation-item" href="#portfolio" as="li"><a className="page-scroll">portfolio</a></Nav.Link>
                <Nav.Link className="navigation-item" href="#contact" as="li"><a className="page-scroll">Contact</a></Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Navbar>
          </Col>
        </Row>
      </Container>

      <style jsx>{`
        .navigation {
          -webkit-box-shadow: 0px 0px 29px 0px rgba(134, 134, 134, 0.25);
          -moz-box-shadow: 0px 0px 29px 0px rgba(134, 134, 134, 0.25);
          box-shadow: 0px 0px 29px 0px rgba(134, 134, 134, 0.25);
          padding: 30px 0;
          background-color: #fff;
          -webkit-transition: all 0.3s ease-out 0s;
          -moz-transition: all 0.3s ease-out 0s;
          -ms-transition: all 0.3s ease-out 0s;
          -o-transition: all 0.3s ease-out 0s;
          transition: all 0.3s ease-out 0s;
        }
        .navigation.sticky {
          padding: 20px 0;
          -webkit-transition: all 0.3s ease-out 0s;
          -moz-transition: all 0.3s ease-out 0s;
          -ms-transition: all 0.3s ease-out 0s;
          -o-transition: all 0.3s ease-out 0s;
          transition: all 0.3s ease-out 0s;
        }
        .navigation .navigation-bar {
          padding: 0;
          position: relative;
        }
        .navigation .navigation-bar .navigation-brand {
          display: flex;
          flex-direction: row;
          padding-top: 0;
          padding-bottom: 5px;
        }
        .navigation-brand img {
          height: 8rem;
        }
        .header-icon {
          font-size: 25px;
          margin-right: 5px;
          color: #97233f;
        }
        .navigation .navigation-bar .navigation-toggler {
          padding: 2px 6px;
        }
        .navigation .navigation-bar .navigation-toggler .toggler-icon {
          width: 30px;
          height: 2px;
          background-color: #32333c;
          margin: 5px 0;
          display: block;
          position: relative;
          -webkit-transition: all 0.3s ease-out 0s;
          -moz-transition: all 0.3s ease-out 0s;
          -ms-transition: all 0.3s ease-out 0s;
          -o-transition: all 0.3s ease-out 0s;
          transition: all 0.3s ease-out 0s;
        }
        .navigation
          .navigation-bar
          .navigation-toggler.active
          .toggler-icon:nth-of-type(1) {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          top: 7px;
        }
        .navigation
          .navigation-bar
          .navigation-toggler.active
          .toggler-icon:nth-of-type(2) {
          opacity: 0;
        }
        .navigation
          .navigation-bar
          .navigation-toggler.active
          .toggler-icon:nth-of-type(3) {
          -webkit-transform: rotate(135deg);
          -moz-transform: rotate(135deg);
          -ms-transform: rotate(135deg);
          -o-transform: rotate(135deg);
          transform: rotate(135deg);
          top: -7px;
        }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .navigation .navigation-bar .navigation-collapse {
            position: absolute;
            top: 158%;
            left: 0;
            width: 100%;
            background-color: #fff;
            z-index: 99;
            -webkit-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);
            -moz-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);
            box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);
            padding: 3px 12px;
          }
        }
        @media (max-width: 767px) {
          .navigation .navigation-bar .navigation-collapse {
            position: absolute;
            top: 158%;
            left: 0;
            width: 100%;
            background-color: #fff;
            z-index: 99;
            -webkit-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);
            -moz-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);
            box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);
            padding: 3px 12px;
          }
        }
        .navigation .navigation-bar .navigationBar-nav .navigation-item {
          margin-left: 30px;
        }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .navigation .navigation-bar .navigationBar-nav .navigation-item {
            margin: 4px 0;
          }
        }
        @media (max-width: 767px) {
          .navigation .navigation-bar .navigationBar-nav .navigation-item {
            margin: 4px 0;
          }
        }
        .navigation .navigation-bar .navigationBar-nav .navigation-item:first-child {
          margin-left: 0;
        }
        .navigation .navigation-bar .navigationBar-nav .navigation-item a {
          text-transform: uppercase;
          font-size: 16px;
          color: #8a8fa3;
          font-weight: 500;
          position: relative;
          -webkit-transition: all 0.3s ease-out 0s;
          -moz-transition: all 0.3s ease-out 0s;
          -ms-transition: all 0.3s ease-out 0s;
          -o-transition: all 0.3s ease-out 0s;
          transition: all 0.3s ease-out 0s;
        }
        .navigation .navigation-bar .navigationBar-nav .navigation-item a::before {
          position: absolute;
          content: "";
          width: 3px;
          height: 0;
          background-color: #97233f;
          left: 50%;
          top: -50px;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%);
          -webkit-transition: all 0.3s ease-out 0s;
          -moz-transition: all 0.3s ease-out 0s;
          -ms-transition: all 0.3s ease-out 0s;
          -o-transition: all 0.3s ease-out 0s;
          transition: all 0.3s ease-out 0s;
        }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .navigation .navigation-bar .navigationBar-nav .navigation-item a::before {
            display: none;
          }
        }
        @media (max-width: 767px) {
          .navigation .navigation-bar .navigationBar-nav .navigation-item a::before {
            display: none;
          }
        }
        .navigation .navigation-bar .navigationBar-nav .navigation-item.active a,
        .navigation .navigation-bar .navigationBar-nav .navigation-item:hover a {
          color: #97233f;
        }
        .navigation .navigation-bar .navigationBar-nav .navigation-item.active a::before,
        .navigation .navigation-bar .navigationBar-nav .navigation-item:hover a::before {
          height: 45px;
        }
      `}</style>
    </div>
  );
}