body {

  margin: 0;

  font-family: Roboto, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

​

code {

  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

    monospace;

}

​

import React, { useState, useEffect } from "react";

import "mdb-react-ui-kit/dist/css/mdb.min.css";

import {

  MDBBtn,

  MDBContainer,

  MDBNavbar,

  MDBNavbarBrand,

  MDBNavbarToggler,

  MDBIcon,

  MDBNavbarNav,

  MDBNavbarItem,

  MDBNavbarLink,

  MDBDropdown,

  MDBDropdownToggle,

  MDBDropdownMenu,

  MDBDropdownItem,

  MDBCollapse,

} from "mdb-react-ui-kit";

import Link from "next/link";

import logo from "../assets/logos/logo.svg";

import logoAlternate from "../assets/logos/logo-alternate.svg";

import MenuIcon from '@mui/icons-material/Menu';

import { useRouter } from "next/router";

//import { Navbar, Button, Form, FormControl, Nav, NavDropdown, Container, Offcanvas, Accordion } from 'react-bootstrap'

import MediaQuery from "react-responsive";

​

const NavBar = () => {

  const [mounted, setMounted] = useState(false);

  const [isOpen, setIsOpen] = useState(false);

  const [scrollTop, setScrollTop] = useState(0);

  const [scrolling, setScrolling] = useState(true);

  const router = useRouter();

  const headerAlternatePages = ["/", "/admin"];

​

  useEffect(() => {

    setMounted(true);

    const onScroll = (e) => {

      setScrollTop(e.target.documentElement.scrollTop);

      setScrolling(e.target.documentElement.scrollTop > scrollTop);

    };

    window.addEventListener("scroll", onScroll);

​

    return () => window.removeEventListener("scroll", onScroll);

  }, [scrolling]);

​

  const [showNav, setShowNav] = useState(false);

​

  return (

    <>

      {mounted && (

        <>

          <header>

            <MDBNavbar

              fixed="top"

              bgColor={

                scrollTop == 0 && headerAlternatePages.includes(router.asPath)

                  ? "transparent"

                  : "light"

              }

              expand="md"

            >

              <MDBContainer fluid>

                <Link href="/" passHref>

                  <MDBNavbarLink>

                    <MDBNavbarBrand className="me-5">

                      <img

                        width="108px"

                        src={

                          scrollTop == 0 &&

                          headerAlternatePages.includes(router.asPath)

                            ? logoAlternate.src

                            : logo.src

                        }

                        alt=""

                      />

                    </MDBNavbarBrand>

                  </MDBNavbarLink>

                </Link>

                <MDBNavbarToggler

                  data-mdb-target="#navbarSupportedContent"

                  aria-controls="navbar"

                  data-mdb-toggle="collapse"

                  aria-expanded="false"

                  aria-label="Toggle navigation"

                  onClick={() => setShowNav(!showNav)}

                >

                   <MenuIcon fontSize="small" />

                </MDBNavbarToggler>

​

                <MDBCollapse navbar show={showNav} id="navbarSupportedContent">

                  <MDBNavbarNav right className="ms-auto mb-2 mb-lg-0">

                    <MDBNavbarItem>

                      <Link href="/mypaths" passHref>

                        <MDBNavbarLink active aria-current="page">

                          My Paths

                        </MDBNavbarLink>

                      </Link>

                    </MDBNavbarItem>

                    <MDBNavbarItem>

                      <MDBDropdown>

                        <MDBDropdownToggle tag="a" className="nav-link">

                          Browse Opportunities

                        </MDBDropdownToggle>

                        <MDBDropdownMenu>

                          <Link href="/positions/" passHref>

                            <MDBDropdownItem link>Find My Path</MDBDropdownItem>

                          </Link>

                          <Link href="/jobs/" passHref>

                            <MDBDropdownItem link>

                              Browse Open Positions

                            </MDBDropdownItem>

                          </Link>

                        </MDBDropdownMenu>

                      </MDBDropdown>

                    </MDBNavbarItem>

                    <MDBNavbarItem>

                      <MDBDropdown>

                        <MDBDropdownToggle tag="a" className="nav-link">

                          Training

                        </MDBDropdownToggle>

                        <MDBDropdownMenu>

                          <MDBDropdownItem link>

                            Career Path Training

                          </MDBDropdownItem>

                          <MDBDropdownItem

                            link

                            target="blank"

                            href="https://asburyauto.brainier.com/#/dashboard"

                          >

                            Asbury Learning Hub

                          </MDBDropdownItem>

                          <MDBDropdownItem link>Leaderboard</MDBDropdownItem>

                        </MDBDropdownMenu>

                      </MDBDropdown>

                    </MDBNavbarItem>

                    <MDBNavbarItem>

                      <MDBDropdown>

                        <MDBDropdownToggle tag="a" className="nav-link">

                          My Team

                        </MDBDropdownToggle>

                        <MDBDropdownMenu>

                          <MDBDropdownItem link>View My Team</MDBDropdownItem>

                          <MDBDropdownItem link>

                            My Team's Paths

                          </MDBDropdownItem>

                        </MDBDropdownMenu>

                      </MDBDropdown>

                    </MDBNavbarItem>

                  </MDBNavbarNav>

​

                  <form

                    className="d-flex input-group w-auto"

                    style={{ width: "456px" }}

                  >

                    <input

                      type="search"

                      className="form-control"

                      placeholder="Find a position."

                      aria-label="Search"

                    />

                    <MDBBtn color="primary">Search</MDBBtn>

                  </form>

                </MDBCollapse>

              </MDBContainer>

            </MDBNavbar>

          </header>

        </>

      )}

    </>

  );

};

​

export default NavBar;

​