nav bar codes

package.json

@@ -31,6 +31,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "jsdom": "^24.0.0",
+    "react-router-dom": "^6.22.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vitest": "^1.2.2"

src/App.tsx

@@ -3,6 +3,10 @@ import reactLogo from './assets/img/react.svg'
 import viteLogo from '/vite.svg'
 import {useQuery} from "@tanstack/react-query";
 import resolveURL from "./api/fetch.ts";
+
+import NavBar from "./components/NavBar.tsx";
+import NavBarMobile from "./components/NavBarMobile.tsx";
+
 import './assets/css/App.css'
 
 function App() {
@@ -15,6 +19,8 @@ function App() {
 
   return (
     <>
+      <NavBar/>
+      <NavBarMobile/>
       <div>
         <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src={viteLogo} className="logo" alt="Vite logo" />

src/assets/css/NavBar.css

@@ -0,0 +1,75 @@
+.overallHeader {
+    display: flex;
+    justify-content: space-between; 
+    background-color: #0C1747; 
+    align-items: center;
+    overflow: hidden; 
+    width: 100%;
+    position: fixed; 
+    top: 0; 
+    font-family: 'DM Sans', sans-serif;
+    height: 98px;
+  }
+
+
+.overallHeader div a {
+    display: block;
+    color: white; 
+    text-align: center;
+    text-decoration: none;
+    font-size: 20px;
+    padding: 30px;
+    font-weight: 400;
+}
+.overallHeader div a:hover {
+    color:#F9A72B;
+}
+
+.personLogo {
+    max-width: 54.95px;
+    height: auto;
+    padding-right: 44px;
+}
+
+.fintechLogo{
+    max-width: 146px;
+    height: auto;
+}
+.profileOptions {
+    position: fixed; 
+    top: 98px; 
+    right: 12px; 
+    font-size: 16px;
+    background-color: rgb(255, 255, 255);
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1000; 
+    width: 158px;
+    height: 116px;
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    font-family: 'DM Sans', sans-serif;
+}
+
+.profileOption,
+.signOutOption {
+    cursor: pointer;
+    text-align: center;
+}
+
+.profileOption:hover,
+.signOutOption:hover {
+    background-color: rgba(202, 202, 202, 0.2); 
+}
+
+
+/* @media (max-width: 767px) {
+    header {
+      display: none;
+    }
+  } */
+
+
+
+
+

src/assets/css/NavBarMobile.css

@@ -0,0 +1,78 @@
+/* @media (min-width: 768px) {
+    header {
+      display: none;
+    }
+  } */
+
+.overallHeader {
+    display: flex;
+    justify-content: space-between; 
+    background-color: #0C1747; 
+    align-items: center;
+    overflow: hidden; 
+    width: 100%;
+    position: fixed; 
+    top: 0; 
+    font-family: 'DM Sans', sans-serif;
+    height: 100px;
+}
+
+
+.overallHeader div a {
+    display: block;
+    color: white; 
+    text-align: center;
+    text-decoration: none;
+    font-size: 20px;
+    padding: 30px;
+}
+
+
+.personLogo {
+    max-width: 54.95px;
+    height: auto;
+    padding-right: 44px;
+}
+
+.fintechLogo{
+    max-width: 146px;
+    height: auto;
+    padding-left: 20px;
+}
+
+.closeLogo{
+    padding-right: 26px;
+    max-width: 44px;
+}
+.sidebar {
+    position: fixed; 
+    top: 100px; 
+    background-color: #0C1747;
+    display: block;
+    z-index: 1000; 
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    font-family: 'DM Sans', sans-serif;
+}
+
+.sidebar div a {
+    display: block;
+    color: white; 
+    text-align: left;
+    text-decoration: none;
+    align-items: center;
+    font-size: 30px;
+    padding: 10px;
+    padding-left: 44px;
+    font-weight: 500;
+}
+
+.sidebar .Link:hover {
+    color: #F9A72B;
+  }
+
+
+
+
+

src/components/Announcements.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Announcements: React.FC = () => {
+  return (
+    <div>
+      <h1>Announcements</h1>
+      {/* Add your announcements content here */}
+    </div>
+  );
+};
+
+export default Announcements;

src/components/Events.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Events: React.FC = () => {
+  return (
+    <div>
+      <h1>Events</h1>
+    </div>
+  );
+};
+
+export default Events;

src/components/Home.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Navbar from "./NavBar.tsx";
+import NavbarMobile from "./NavBarMobile.tsx";
+const Home: React.FC = () => {
+  return (
+    <div>
+      <Navbar />
+      <h1>Home</h1>
+    </div>
+  );
+};
+
+export default Home;

src/components/Members.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Members: React.FC = () => {
+  return (
+    <div>
+      <h1>members</h1>
+    </div>
+  );
+};
+
+export default Members;

src/components/NavBar.tsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Link } from "react-router-dom";
+import "../assets/css/NavBar.css";
+import personLogo from "../assets/img/person_logo.png";
+import fintechLogo from "../assets/img/fintech_logo.png";
+
+function Navbar(): JSX.Element {
+  const [showProfileOptions, setShowProfileOptions] = useState(false);
+  const overallHeaderRef = useRef(null);
+  const profileOptionsRef = useRef(null);
+
+  const toggleProfileOptions = () => {
+    setShowProfileOptions(!showProfileOptions);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        overallHeaderRef.current &&
+        !overallHeaderRef.current.contains(event.target) &&
+        profileOptionsRef.current &&
+        !profileOptionsRef.current.contains(event.target)
+      ) {
+        setShowProfileOptions(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <header>
+      <div className="overallHeader" ref={overallHeaderRef}>
+        <div>
+          <a href="/">
+            <img src={fintechLogo} alt="fintech Logo" className="fintechLogo" />
+          </a>
+        </div>
+        <div>
+          <Link to="/announcements" className="Link">
+            Announcements
+          </Link>
+        </div>
+        <div>
+          <Link to="/members" className="Link">
+            Members
+          </Link>
+        </div>
+        <div>
+          <Link to="/events" className="Link">
+            Events
+          </Link>
+        </div>
+        <div>
+          <Link to="/tasks" className="Link">
+            Tasks
+          </Link>
+        </div>
+        <div>
+          <Link to="/" className="Link">
+            Attendance
+          </Link>
+        </div>
+        <div>
+          <Link to="/recruitment" className="Link">
+            Recruitment
+          </Link>
+        </div>
+        <div ref={profileOptionsRef}>
+          <img
+            src={personLogo}
+            alt="Person Logo"
+            className="personLogo"
+            onClick={toggleProfileOptions}
+          />
+          {showProfileOptions && (
+            <div className="profileOptions">
+              <div className="profileOption">
+                <p>Profile</p>
+              </div>
+              <div className="signOutOption">
+                <p>Sign Out</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Navbar;