first commit

src/Components/Navigation/Navbar.js

@@ -0,0 +1,120 @@
+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(true);
+  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(item) {
+    const link = item.toLowerCase();
+    navigate(`/${link}`);
+  }
+
+  async function handleLogout() {
+    SignOutUser();
+  }
+
+  return (
+    <div className="navbar-wrapper">
+      <Navbar fixed="top" className="navbar-main">
+        <div className="logo-container">
+          <a href="/">
+            <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} />
+        </div>
+      </Navbar>
+      <div className="navbar-main-spacer"></div>
+    </div>
+  );
+};
+
+export default NavbarElement;
+
+/*
+              <button
+                className="nav-button"
+                onClick={() => handleClick(item.text)}
+              >
+                {item.text}
+              </button>
+              */