initial commit

client/src/NavBar/AdminDropdown/AdminDropdown.css

@@ -0,0 +1,7 @@
+#api-container {
+  font-size: smaller;
+}
+
+#auth-row {
+  background-color: var(--grapefruit-yellow-washed-out);
+}

client/src/NavBar/AdminDropdown/AdminDropdown.tsx

@@ -0,0 +1,49 @@
+import { ButtonGroup, Container } from "react-bootstrap";
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+import Profile from "../../Auth/Profile";
+import Login from "../../Buttons/Login";
+import Logout from "../../Buttons/Logout";
+import "./AdminDropdown.css";
+
+interface AdminDropdownProps {
+  appVersion: string;
+  apiVersion: string;
+  token: string;
+  setToken: React.Dispatch<React.SetStateAction<string>>;
+}
+
+function AdminDropdown(props: AdminDropdownProps) {
+  const AuthButton = () => {
+    return props.token ? (
+      <Logout setToken={props.setToken} />
+    ) : (
+      <Login setToken={props.setToken} />
+    );
+  };
+
+  return (
+    <>
+      <DropdownButton
+        as={ButtonGroup}
+        align={{ lg: "end" }}
+        title="Admin"
+        id="admin-dropdown"
+        variant="link"
+        className="navbar-text-color"
+      >
+        {props.token && <Profile token={props.token} />}
+        <Dropdown.Item eventKey="1" className="text-end" id="auth-row">
+          <AuthButton />
+        </Dropdown.Item>
+        <Dropdown.Divider />
+        <Container className="text-end text-muted" id="api-container">
+          <p>APP Version: {props.appVersion}</p>
+          <p>API Version: {props.apiVersion}</p>
+        </Container>
+      </DropdownButton>
+    </>
+  );
+}
+
+export default AdminDropdown;

client/src/NavBar/NavBar.css

@@ -0,0 +1,36 @@
+.navbar-color {
+  backdrop-filter: blur(10px);
+  transition: background-color 0.5s ease;
+}
+
+.navbar-text-color .dropdown-toggle {
+  color: var(--group-info-color);
+}
+
+.navbar-scrolled {
+  background-color: var(--grapefruit-yellow);
+}
+
+.logo {
+  height: 1.7rem;
+  width: auto;
+}
+
+#nav-contact {
+  margin-right: 8px;
+}
+
+#admin-dropdown {
+  text-decoration: none;
+  text-align: left;
+  padding-left: 0;
+}
+
+#admin-dropdown:hover {
+  text-decoration: none;
+  color: var(--group-info-lighter-color);
+}
+
+.dropdown-menu {
+  background-color: var(--grapefruit-yellow-washed-out);
+}

client/src/NavBar/NavBar.tsx

@@ -0,0 +1,91 @@
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+import "./NavBar.css";
+import { useState, useEffect } from "react";
+import AdminDropdown from "./AdminDropdown/AdminDropdown";
+import { Image, NavDropdown } from "react-bootstrap";
+import { MusicianObj } from "../Musicians/Musician/Musician";
+
+interface NavBarProps {
+  musicians: MusicianObj[];
+  appVersion: string;
+  apiVersion: string;
+  token: string;
+  setToken: React.Dispatch<React.SetStateAction<string>>;
+}
+
+function NavBar(props: NavBarProps) {
+  const [scrolled, setScrolled] = useState(false);
+
+  const MusicianLinks = props.musicians.map((musician) => (
+    <NavDropdown.Item
+      className="navbar-text-color"
+      href={"#" + musician.name.split(" ").join("-").toLowerCase()}
+      key={musician.id}
+    >
+      {musician.name}
+    </NavDropdown.Item>
+  ));
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const isScrolled = window.scrollY > 0;
+      if (isScrolled !== scrolled) {
+        setScrolled(!scrolled);
+      }
+    };
+
+    document.addEventListener("scroll", handleScroll);
+    return () => {
+      document.removeEventListener("scroll", handleScroll);
+    };
+  }, [scrolled]);
+
+  return (
+    <Navbar
+      className={`navbar-color ${scrolled ? "navbar-scrolled" : ""}`}
+      expand="lg"
+      sticky="top"
+    >
+      <Container>
+        <Navbar.Brand href="#root" className="navbar-text-color">
+          <Image src="/favicon.ico" alt="TGD Logo" className="logo" />
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse className="justify-content-end">
+          <Nav>
+            <Nav.Link href="#home" className="navbar-text-color">
+              About
+            </Nav.Link>
+            <NavDropdown title="Musicians" className="">
+              <NavDropdown.Item href="#musicians" className="navbar-text-color">
+                All
+              </NavDropdown.Item>
+              <NavDropdown.Divider />
+              {MusicianLinks}
+            </NavDropdown>
+            <Nav.Link href="#events" className="navbar-text-color">
+              Events
+            </Nav.Link>
+            <Nav.Link
+              href="#contact"
+              className="navbar-text-color"
+              id="nav-contact"
+            >
+              Contact
+            </Nav.Link>
+            <AdminDropdown
+              apiVersion={props.apiVersion}
+              appVersion={props.appVersion}
+              token={props.token}
+              setToken={props.setToken}
+            />
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default NavBar;