nav bar codes

src/assets/css/shared/NavBar.module.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/shared/NavBarMobile.module.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/shared/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/shared/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/shared/Home.tsx

@@ -0,0 +1,14 @@
+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/shared/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/shared/NavBar.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import styles from "css/shared/NavBar.module.css";
+import personLogo from "/person_logo.png";
+import fintechLogo from "/fintech_logo.png";
+import { useWindowSize } from "@uidotdev/usehooks";
+import { useClickAway } from "@uidotdev/usehooks";
+import NavBarMobile from "./NavBarMobile.tsx";
+
+function Navbar() {
+  const [showProfileOptions, setShowProfileOptions] = useState(false);
+  const size = useWindowSize(); // Get window size
+
+  const profileOptionsRef = useClickAway(() => {
+    setShowProfileOptions(false);
+  });
+
+  const handleProfile = () => {
+    if (!showProfileOptions) {
+      setShowProfileOptions(true);
+    }
+  };
+
+  return (
+    <>
+      {size.width && size.width < 767 ? ( // Check window width
+        <NavBarMobile />
+      ) : (
+        <header>
+          <div className={styles.overallHeader}>
+            <div>
+              <a href="/public">
+                <img
+                  src={fintechLogo}
+                  alt="fintech Logo"
+                  className={styles.fintechLogo}
+                />
+              </a>
+            </div>
+            <div>
+              <Link to="/announcements" className={styles.Link}>
+                Announcements
+              </Link>
+            </div>
+            <div>
+              <Link to="/members" className={styles.Link}>
+                Members
+              </Link>
+            </div>
+            <div>
+              <Link to="/events" className={styles.Link}>
+                Events
+              </Link>
+            </div>
+            <div>
+              <Link to="/tasks" className={styles.Link}>
+                Tasks
+              </Link>
+            </div>
+            <div>
+              <Link to="/" className={styles.Link}>
+                Attendance
+              </Link>
+            </div>
+            <div>
+              <Link to="/recruitment" className={styles.Link}>
+                Recruitment
+              </Link>
+            </div>
+            <div ref={profileOptionsRef}>
+              <img
+                src={personLogo}
+                alt="Person Logo"
+                className={styles.personLogo}
+                onClick={handleProfile}
+              />
+              {showProfileOptions && (
+                <div ref={profileOptionsRef} className={styles.profileOptions}>
+                  <div className={styles.profileOption}>
+                    <p>Profile</p>
+                  </div>
+                  <div className={styles.signOutOption}>
+                    <p>Sign Out</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </header>
+      )}
+    </>
+  );
+}
+
+export default Navbar;