Granthamblin0/tces 9 urd navbar

client/.prettierignore

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

client/src/App.jsx

@@ -11,5 +11,4 @@ function App() {
     </div>
   );
 }
-
 export default App;

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

@@ -0,0 +1,70 @@
+.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;
+  left: 812px;
+}
+
+.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;
+}
+
+.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,22 @@
+import PropTypes from "prop-types";
+import "./Dropdown.css";
+import DropdownItem from "./DropdownItem";
+
+function Dropdown({ isAdmin }) {
+  return (
+    <div className="dropdown-container">
+      <div className="dropdown-title">Profile</div>
+      <div className="dropdown-items">
+        {isAdmin && <DropdownItem label="Admin Dashboard" keyword="admin" />}
+        <DropdownItem label="Settings" keyword="settings" />
+        <DropdownItem label="Log Out" keyword="logout" />
+      </div>
+    </div>
+  );
+}
+
+Dropdown.propTypes = {
+  isAdmin: PropTypes.bool.isRequired,
+};
+
+export default Dropdown;

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

@@ -0,0 +1,33 @@
+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";
+
+function DropdownItem({ label, keyword }) {
+  const icons = {
+    settings: <SettingsIcon color="action" />,
+    logout: <LogoutIcon color="action" />,
+    admin: <AdminIcon color="action" />,
+  };
+
+  const icon = icons[keyword];
+
+  return (
+    <div className="dropdown-item-container">
+      <div className="dropdown-item-left-content">
+        {icon}
+        <div className="dropdown-item-text">{label}</div>
+      </div>
+      <ArrowForwardIcon color="action" />
+    </div>
+  );
+}
+
+DropdownItem.propTypes = {
+  label: PropTypes.string.isRequired,
+  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,34 @@
+import { useState } from "react";
+import logo from "../../../public/img/tces-logo.png";
+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={logo} alt="logo" width="46" height="50" />
+        </div>
+        <div className="left-content-buttons">
+          <NavbarButton title="CLIENTS" />
+          <NavbarButton title="JOB LEADS" />
+          <NavbarButton title="EMPLOYERS" />
+        </div>
+      </div>
+      <div className="right-content">
+        <NavbarProfile toggleDropdown={toggleDropdown} />
+      </div>
+      {isDropdownVisible && <Dropdown isAdmin />}
+    </div>
+  );
+}
+
+export default Navbar;

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

@@ -0,0 +1,16 @@
+import PropTypes from "prop-types";
+import "./Navbar.css";
+
+function NavbarButton({ title }) {
+  return (
+    <button type="button" className="nav-left-button">
+      {title}
+    </button>
+  );
+}
+
+NavbarButton.propTypes = {
+  title: 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;