Granthamblin0/tces 9 urd navbar (#23)

* Completing TCES-38 - added name

* Completing TCES-9 Finished Navbar

* Completing TCES-9 Fixed a few things

* Completing TCES-9 - sorry forgot to use linter

* TCES-9 Fixed most problems

* TCES-9 final final

* TCES-9 Reverted app.jsx changes

* Updated the profile dropdown

* TCES-9 formatting

* TCES-9 more formatting

---------

Co-authored-by: Grant Hamblin <[email protected]>
Co-authored-by: Daniel Dervishi <[email protected]>

client/.prettierignore

@@ -2,4 +2,6 @@ node_modules
 README.md
 .eslintrc.json
 package-lock.json
-package.json
+package.json
+
+

client/src/components/navbar-component/Dropdown.css

@@ -0,0 +1,79 @@
+.dropdown-container {
+  margin-top: 10px;
+  border-radius: 8px;
+  background: var(--light-background-paper, #fff);
+  box-shadow:
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2);
+  width: 600px;
+  position: fixed;
+  top: 56px;
+  right: 25px;
+  z-index: 1000;
+}
+
+.dropdown-title {
+  color: var(--light-text-primary, rgba(0, 0, 0, 0.87));
+  font-feature-settings:
+    "clig" off,
+    "liga" off;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 133.4%;
+  /* 32.016px */
+  height: 32px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 1px solid #0000008a;
+}
+
+.dropdown-item-container {
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  align-self: stretch;
+  justify-content: space-between;
+  height: 48px;
+  background: none;
+  border: none;
+  width: 100%;
+}
+
+.dropdown-item-button {
+  text-decoration: none;
+  display: block;
+  width: 100%;
+}
+
+.dropdown-item-container:not(:last-child) {
+  border-bottom: 1px solid #0000008a;
+}
+
+.dropdown-items {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.dropdown-item-text {
+  color: var(--light-text-primary, rgba(0, 0, 0, 0.87));
+  font-feature-settings:
+    "clig" off,
+    "liga" off;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0.15px;
+}
+
+.dropdown-item-left-content {
+  display: flex;
+  gap: 22px;
+}

client/src/components/navbar-component/Dropdown.jsx

@@ -0,0 +1,46 @@
+import PropTypes from "prop-types";
+import { useEffect, useRef } from "react";
+import "./Dropdown.css";
+import DropdownItem from "./DropdownItem";
+
+function Dropdown({ isAdmin, setIsDropdownVisible }) {
+  function useOutsideAlerter(ref) {
+    useEffect(() => {
+      /**
+       * Alert if clicked on outside of element
+       */
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setIsDropdownVisible(false);
+        }
+      }
+      // Bind the event listener
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [ref]);
+  }
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+
+  return (
+    <div className="dropdown-container" ref={wrapperRef}>
+      <div className="dropdown-title">Profile</div>
+      <div className="dropdown-items">
+        {isAdmin && <DropdownItem keyword="admin" />}
+        <DropdownItem keyword="settings" />
+        <DropdownItem keyword="logout" />
+      </div>
+    </div>
+  );
+}
+
+Dropdown.propTypes = {
+  isAdmin: PropTypes.bool.isRequired,
+  setIsDropdownVisible: PropTypes.func.isRequired,
+};
+
+export default Dropdown;

client/src/components/navbar-component/DropdownItem.jsx

@@ -0,0 +1,54 @@
+import PropTypes from "prop-types";
+import "./Navbar.css";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import SettingsIcon from "@mui/icons-material/Settings";
+import LogoutIcon from "@mui/icons-material/Logout";
+import AdminIcon from "@mui/icons-material/Group";
+import Button from "@mui/material/Button";
+
+function DropdownItem({ keyword }) {
+  const icons = {
+    settings: <SettingsIcon color="action" />,
+    logout: <LogoutIcon color="action" />,
+    admin: <AdminIcon color="action" />,
+  };
+
+  const labels = {
+    settings: "Settings",
+    logout: "Log Out",
+    admin: "Admin Dashboard",
+  };
+
+  const routes = {
+    settings: "#",
+    logout: "#",
+    admin: "#",
+  };
+
+  const icon = icons[keyword];
+  const label = labels[keyword];
+  const route = routes[keyword];
+
+  return (
+    <Button
+      variant="text"
+      className="dropdown-item-button"
+      style={{ color: "rgba(0, 0, 0, 0.6)" }}
+      href={route}
+    >
+      <div className="dropdown-item-container">
+        <div className="dropdown-item-left-content">
+          {icon}
+          <div className="dropdown-item-text">{label}</div>
+        </div>
+        <ArrowForwardIcon color="action" />
+      </div>
+    </Button>
+  );
+}
+
+DropdownItem.propTypes = {
+  keyword: PropTypes.string.isRequired,
+};
+
+export default DropdownItem;

client/src/components/navbar-component/Navbar.css

@@ -0,0 +1,46 @@
+.nav-container {
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  padding: 8px 16px;
+  border-bottom: 1px solid #0000008a;
+  background: var(--light-primary-contrast, #fff);
+  box-shadow:
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+.left-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.right-content {
+  display: flex;
+  align-items: center;
+}
+
+.right-content-image {
+  padding: 12px;
+  background: none;
+  border: none;
+}
+.left-content-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 342px;
+  margin-left: 50px;
+}
+
+.nav-left-button {
+  color: rgba(0, 0, 0, 0.6);
+  background: none;
+  border: none;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: 0.46000000834465027px;
+  text-align: left;
+}

client/src/components/navbar-component/Navbar.jsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import Dropdown from "./Dropdown";
+import NavbarProfile from "./NavbarProfile";
+import NavbarButton from "./NavbarButton";
+
+function Navbar() {
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsDropdownVisible(!isDropdownVisible);
+  };
+
+  return (
+    <div className="nav-container">
+      <div className="left-content">
+        <div className="image">
+          <img src="./img/tcesLogo.svg" alt="logo" width="46" height="50" />
+        </div>
+        <div className="left-content-buttons">
+          <NavbarButton keyword="clients" />
+          <NavbarButton keyword="jobleads" />
+          <NavbarButton keyword="employers" />
+        </div>
+      </div>
+      <div className="right-content">
+        <NavbarProfile toggleDropdown={toggleDropdown} />
+      </div>
+      {isDropdownVisible && (
+        <Dropdown isAdmin setIsDropdownVisible={setIsDropdownVisible} />
+      )}
+    </div>
+  );
+}
+
+export default Navbar;

client/src/components/navbar-component/NavbarButton.jsx

@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+import Button from "@mui/material/Button";
+import "./Navbar.css";
+
+function NavbarButton({ keyword }) {
+  const titles = {
+    clients: "CLIENTS",
+    jobleads: "JOB LEADS",
+    employers: "EMPLOYERS",
+  };
+
+  const routes = {
+    clients: "#",
+    jobleads: "#",
+    employers: "#",
+  };
+
+  const title = titles[keyword];
+  const route = routes[keyword];
+  return (
+    <Button
+      variant="text"
+      className="nav-left-button"
+      style={{ color: "rgba(0, 0, 0, 0.6)" }}
+      href={route}
+    >
+      {title}
+    </Button>
+  );
+}
+
+NavbarButton.propTypes = {
+  keyword: PropTypes.string.isRequired,
+};
+
+export default NavbarButton;

client/src/components/navbar-component/NavbarProfile.jsx

@@ -0,0 +1,18 @@
+import PropTypes from "prop-types";
+import "./Navbar.css";
+import IconButton from "@mui/material/IconButton";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+
+function NavbarProfile({ toggleDropdown }) {
+  return (
+    <IconButton className="right-content-image" onClick={toggleDropdown}>
+      <AccountCircleIcon />
+    </IconButton>
+  );
+}
+
+NavbarProfile.propTypes = {
+  toggleDropdown: PropTypes.func.isRequired,
+};
+
+export default NavbarProfile;