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>
+              */

src/Components/Navigation/Navpanel.js

@@ -0,0 +1,49 @@
+import React from "react";
+import "../../styles/navpanel.scss";
+import "../../styles/contact.scss";
+import { Link } from "react-router-dom";
+
+export default function Navpanel(props) {
+  const { menuOpen, setMenuOpen, navToggle } = props;
+  console.log("+++++++++menuOpen", menuOpen);
+  const mobileMainHeadingClass = menuOpen
+    ? "mobileMainHeadingShow"
+    : "mobile-main-heading-hide";
+
+  const mobileHeadingWrapperClass = menuOpen
+    ? "mobile-heading-wrapper1"
+    : "mobile-heading-wrapper";
+
+  console.log("mobileMainHeadingClass", mobileMainHeadingClass);
+  console.log("mobileHeadingWrapperClass", mobileHeadingWrapperClass);
+  return (
+    <div className={mobileMainHeadingClass}>
+      <div className={mobileHeadingWrapperClass}>
+        <div className="mobileHeadingClose">
+          <div className="mobileHeadingCloseInner">
+            <a className="mobileHeadingButton" onClick={navToggle}></a>
+          </div>
+        </div>
+        <div className="mobileHeadingLinkWrap">
+          <div className="mobile-info-box">
+            <div className="contact-detail-one">
+              <Link className="contactLink" href="/login">
+                Login
+              </Link>
+            </div>
+            <div className="contact-detail-two">
+              <a className="contact-link-two" href="/features">
+                Features
+              </a>
+            </div>
+            <div className="contact-detail-three">
+              <a className="nav-link-three" href="/signup">
+                Signup
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}