ax3Client/src/Components/Navigation/Navbar.js

import React, { useState } from "react";
import Nav from "react-bootstrap/Nav";
import NavItem from "react-bootstrap/NavItem";
import Navbar from "react-bootstrap/Navbar";
import Dropdown from "react-bootstrap/Dropdown";
import { List } from "react-bootstrap-icons";
import { useNavigate } from "react-router-dom";
import { SignOutUser } from "../../firebase";
import Navpanel from "./Navpanel";
import logoNobackCropped from "../../Assets/logoNobackCropped.png";

const CustomToggle = React.forwardRef(({ onClick }, ref) => (
  <div className="navbar-gear">
    <List
      className="desktop-hamburg"
      size="36px"
      ref={ref}
      onClick={(e) => {
        e.preventDefault();
        onClick(e);
      }}
    />
  </div>
));

const NavbarElement = (props) => {
  //const [showMenu, setShowMenu] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
  const token = window.sessionStorage.getItem("token");
  const navigate = useNavigate();
  const navItems = token
    ? [
        { text: "Dashboard", link: `dashboard` },
        { text: "Cases", link: "cases" },
        { text: "Documents", link: "documents" },
        { text: "How-to", link: "how-to" },
        { text: "Blog", link: "dashboard" },
      ]
    : [
        { text: "Login", link: "login" },
        { text: "Features", link: "features" },
        { text: "Signup", link: "signup" },
        { text: "Blog", link: "login" },
      ];

  function navToggle() {
    setMenuOpen(!menuOpen);
  }

  function handleClick(link) {
    /*
    if (link === "signup") {
      return;
    }
    */
    const _link = link.toLowerCase();
    if (_link === undefined) {
      _link = "";
    }
    navigate(`/${_link}`);
  }

  function packUpAndLeave(link) {
    navToggle();
    if (link === "signup") {
      return;
    }
    handleClick(link);
  }

  function special() {
    navigate("/");
    if (menuOpen) {
      setMenuOpen(false);
    }
  }

  async function handleLogout() {
    SignOutUser();
  }

  return (
    <div className="navbar-wrapper">
      <Navbar fixed="top" className="navbar-main">
        <div className="logo-container">
          <a onClick={() => special("")}>
            <img src={logoNobackCropped} className="nav-"></img>
          </a>
        </div>
        <Nav className="me-auto nav-row navbar-items">
          {navItems.map((item, i) => (
            <NavItem key={`item${i}`} href={item.link}>
              <button
                className="nav-button"
                onClick={() => handleClick(item.link)}
              >
                {item.text}
              </button>
            </NavItem>
          ))}
        </Nav>
        <div className="navbar-user-info">
          {token ? (
            <div>
              <div className="nav-menu-container">
                <Dropdown drop="down" align="end">
                  <Dropdown.Toggle as={CustomToggle} />
                  <Dropdown.Menu>
                    <Dropdown.Item eventKey="2" href="/account">
                      Account
                    </Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item eventKey="4" onClick={() => handleLogout()}>
                      Logout
                    </Dropdown.Item>
                  </Dropdown.Menu>
                </Dropdown>
              </div>
            </div>
          ) : (
            <></>
          )}
        </div>
        <div className="navbar-mobile-hamburg">
          <List size="36px" onClick={() => navToggle()} />
          <Navpanel
            menuOpen={menuOpen}
            navToggle={navToggle}
            packUpAndLeave={packUpAndLeave}
            token={token}
          />
        </div>
      </Navbar>
      <div className="navbar-main-spacer"></div>
    </div>
  );
};

export default NavbarElement;

/*
              <button
                className="nav-button"
                onClick={() => handleClick(item.text)}
              >
                {item.text}
              </button>
              */