Merge remote-tracking branch 'refs/remotes/origin/epic/DEV-4-shared-c…

…omponents-and-layouts' into feature/TAS-13-Layout

# Conflicts:
#	src/routes/App.tsx

src/assets/css/shared/NavBar.module.css

@@ -0,0 +1,76 @@
+.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: 100px;
+    padding-top: 22px;
+    padding-right: 44px;
+}
+
+.fintechLogo{
+    max-width: 146px;
+    height: auto;
+}
+
+.profileOptions {
+    position: fixed; 
+    top: 100px; 
+    right: 12px; 
+    font-size: px;
+    background-color: rgb(255, 255, 255);
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1001; 
+    width: 158px;
+    height: 116;
+    align-items: center; 
+    justify-content: center; 
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 400;
+}
+
+.profileOption,
+.signOutOption {
+    padding: 0px;
+    width: 100%;
+    text-decoration: none; 
+    color: black !important;
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 400;
+}
+
+.profileOption:hover,
+.signOutOption:hover {
+    background-color: rgba(202, 202, 202, 0.2);
+}
+
+.personIconContainer {
+    height: 100px;
+}

src/assets/css/shared/NavBarMobile.module.css

@@ -0,0 +1,72 @@
+.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: 100px;
+    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,96 @@
+/* background-color: rgba(202, 202, 202, 0.2); */
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import styles from "css/shared/NavBar.module.css"; // Assuming you have CSS modules set up
+import personLogo from "/person_logo.png";
+import fintechLogo from "/fintech_logo.png";
+import { useWindowSize } from "@uidotdev/usehooks";
+import NavBarMobile from "./NavBarMobile.tsx";
+
+function Navbar() {
+  const [showProfileOptions, setShowProfileOptions] = useState(false);
+  const size = useWindowSize(); // Get window size
+
+  const handleProfileHover = () => {
+    setShowProfileOptions(true);
+  };
+
+  const handleProfileLeave = () => {
+    setShowProfileOptions(false);
+  };
+
+  return (
+    <>
+      {size.width && size.width < 767 ? (
+        <NavBarMobile />
+      ) : (
+        <div>
+          <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
+              onMouseEnter={handleProfileHover}
+              onMouseLeave={handleProfileLeave}
+              className={styles.personIconContainer}
+            >
+              <img
+                src={personLogo}
+                alt="Person Logo"
+                className={styles.personLogo}
+              />
+              {showProfileOptions && (
+                <div className={styles.profileOptions}>
+                  <Link to="/profile" className={styles.profileOption}>
+                    Profile
+                  </Link>
+                  <Link to="/signout" className={styles.signOutOption}>
+                    Sign Out
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Navbar;