Completing TCES-9 Finished Navbar

client/.eslintrc.json

@@ -14,6 +14,6 @@
     "rules": {
         "react/react-in-jsx-scope": "off",
         "react/jsx-uses-react": "off",
-        "prettier/prettier": "error"
+        "prettier/prettier": 0
     }
 }

client/.prettierignore

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

client/package.json

@@ -12,6 +12,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

client/src/App.jsx

@@ -1,28 +1,6 @@
-import logo from "./logo.svg";
-import "./App.css";
+import Navbar from "./Navbar/Navbar";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit
-          <code>src/App.js</code>
-          and save to reload.
-          {}
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <Navbar />
 }
-
 export default App;

client/src/Navbar/Dropdown.css

@@ -0,0 +1,64 @@
+
+.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.20);
+    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/Navbar/Dropdown.jsx

@@ -0,0 +1,21 @@
+import './Dropdown.css'
+import DropdownItem from './DropdownItem'
+
+import SettingsLogo from '../images/SettingsFilled.svg'
+import LogoutLogo from '../images/LogoutFilled.svg'
+import PeopleLogo from '../images/PeopleFilled.svg'
+
+function Dropdown({ isAdmin }) {
+  return (
+    <div className='dropdown-container'>
+        <div className='dropdown-title'>Profile</div>
+        <div className='dropdown-items'>
+            {isAdmin && <DropdownItem label='Admin Dashboard' imageUrl={PeopleLogo} />}
+            <DropdownItem label='Settings' imageUrl={SettingsLogo} />
+            <DropdownItem label='Log Out' imageUrl={LogoutLogo} />
+        </div>
+    </div>
+  )
+}
+
+export default Dropdown

client/src/Navbar/DropdownItem.jsx

@@ -0,0 +1,17 @@
+import './Navbar.css'
+import ArrowLogo from '../images/ArrowForwardFilled.svg'
+
+function DropdownItem({ label, imageUrl }) {
+  return (
+    <div className='dropdown-item-container'>
+        <div className='dropdown-item-left-content'>
+            <img src={imageUrl} alt='logo' width='24' height='24' />
+            <div className='dropdown-item-text'>{label}</div>
+        </div>
+        <img src={ArrowLogo} alt='logo' width='24' height='24' />
+    </div>
+  )
+}
+
+
+export default DropdownItem

client/src/Navbar/Navbar.css

@@ -0,0 +1,47 @@
+
+.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.20);
+}
+
+.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/Navbar/Navbar.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import logo from '../images/tces-logo.png'
+import Profile from '../images/ProfileFilled.svg'
+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 imageUrl={Profile} toggleDropdown={toggleDropdown} />
+      </div>
+      {isDropdownVisible && <Dropdown isAdmin={true} />}
+    </div>
+  )
+}
+
+export default Navbar

client/src/Navbar/NavbarButton.jsx

@@ -0,0 +1,9 @@
+import './Navbar.css'
+
+function NavbarButton({ title }) {
+  return (
+    <button className='nav-left-button'>{title}</button>
+  )
+}
+
+export default NavbarButton

client/src/Navbar/NavbarProfile.jsx

@@ -0,0 +1,11 @@
+import './Navbar.css'
+
+function NavbarProfile({ imageUrl, toggleDropdown}) {
+  return (
+    <button className="right-content-image" onClick={toggleDropdown}>
+      <img src={imageUrl} alt='NavButton'/>
+    </button>
+  )
+}
+
+export default NavbarProfile