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.3",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vitest": "^1.2.2"

src/App.tsx

@@ -1,42 +1,53 @@
-import { useState } from 'react'
-import reactLogo from './assets/img/react.svg'
-import viteLogo from '/vite.svg'
-import {useQuery} from "@tanstack/react-query";
+import { useState } from "react";
+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 './assets/css/App.css'
+import { BrowserRouter } from "react-router-dom";
+
+import NavBar from "./components/NavBar.tsx";
+import NavBarMobile from "./components/NavBarMobile.tsx";
+
+// import "./assets/css/App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
+  // const [count, setCount] = useState(0);
 
-  const { isPending, data } = useQuery({
-    queryKey: ['resourceData'],
-    queryFn: () => fetch(resolveURL('/resource')).then((res) => res.json())
-  })
+  // const { isPending, data } = useQuery({
+  //   queryKey: ["resourceData"],
+  //   queryFn: () => fetch(resolveURL("/resource")).then((res) => res.json()),
+  // });
 
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>{isPending ? "Loading..." : data.result}</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <BrowserRouter>
+      <>
+        <NavBar />
+        {/* <NavBarMobile /> */}
+        <p>Hello World!</p>
+
+        {/* <div>
+          <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+            <img src={viteLogo} className="logo" alt="Vite logo" />
+          </a>
+          <a href="https://react.dev" target="_blank" rel="noreferrer">
+            <img src={reactLogo} className="logo react" alt="React logo" />
+          </a>
+        </div>
+        <h1>{isPending ? "Loading..." : data.result}</h1>
+        <div className="card">
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is {count}
+          </button>
+          <p>
+            Edit <code>src/App.tsx</code> and save to test HMR
+          </p>
+        </div>
+        <p className="read-the-docs">
+          Click on the Vite and React logos to learn more
+        </p> */}
+      </>
+    </BrowserRouter>
+  );
 }
 
-export default App
+export default App;

src/assets/css/App.css

@@ -1,9 +1,9 @@
-#root {
+/* #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-}
+} */
 
 .logo {
   height: 6em;

src/assets/css/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/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/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,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/Members.tsx

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