NUS-Fintech-Society · gnimnix · May 23, 2024 · May 23, 2024 · May 23, 2024 · May 23, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/css/layout.tsx b/src/assets/css/layout.tsx
diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
@@ -27,6 +27,7 @@ html {
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+  font-family: 'DM Sans', sans-serif;
 }
 
 /* Reapply the pointer cursor for anchor tags */

diff --git a/src/assets/css/shared/NavBar.module.css b/src/assets/css/shared/NavBar.module.css
@@ -1,15 +1,13 @@
 .overallHeader {
-    display: flex;
+    display: none;
     justify-content: space-between; 
     background-color: #0C1747; 
     align-items: center;
     overflow: hidden; 
     width: 100%;
     position: fixed; 
-    top: 0; 
-    font-family: 'DM Sans', sans-serif;
+    top: 0;
     height: 98px;
-
 }
 
 .overallHeader div a {
@@ -23,7 +21,7 @@
 }
 
 .overallHeader div a:hover {
-    color:#F9A72B;
+    color: #F9A72B;
 }
 
 .personLogo {
@@ -32,7 +30,7 @@
     padding-right: 44px;
 }
 
-.fintechLogo{
+.fintechLogo {
     max-width: 146px;
     height: auto;
 }
@@ -41,28 +39,25 @@
     position: fixed; 
     top: 100px; 
     right: 12px; 
-    font-size: px;
+    font-size: 16px;
     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;
+    padding: 0;
     width: 100%;
     text-decoration: none; 
     color: black !important;
-    font-family: 'DM Sans', sans-serif;
     font-weight: 400;
 }
 
@@ -74,3 +69,9 @@
 .personIconContainer {
     height: 100px;
 }
+
+@media screen and (min-width: 992px) {
+    .overallHeader {
+        display: flex;
+    }
+}
diff --git a/src/assets/css/shared/NavBarMobile.module.css b/src/assets/css/shared/NavBarMobile.module.css
@@ -6,8 +6,7 @@
     overflow: hidden; 
     width: 100%;
     position: fixed; 
-    top: 0; 
-    font-family: 'DM Sans', sans-serif;
+    top: 0;
     height: 100px;
 }
 
@@ -47,7 +46,6 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
-    font-family: 'DM Sans', sans-serif;
 }
 
 .sidebar div a {
@@ -57,8 +55,7 @@
     text-decoration: none;
     align-items: center;
     font-size: 30px;
-    padding: 10px;
-    padding-left: 44px;
+    padding: 10px 10px 10px 44px;
     font-weight: 500;
 }
 

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Navbar from "components/shared/NavBar"; // Import the Navbar component.
+import NavBarMobile from "components/shared/NavBarMobile.tsx";
+import { useWindowSize } from "@uidotdev/usehooks";
+import { BREAKPOINTS } from "components/constants.tsx";
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const DefaultLayout: React.FC<LayoutProps> = ({ children=null }) => {
+  const size = useWindowSize();
+  return (
+    <>
+      {size.width && size.width <= BREAKPOINTS.LG ? (
+        <NavBarMobile />
+      ) : (
+        <Navbar />
+      )}
+      {children}
+    </>
+  );
+};
+
+export default DefaultLayout;
diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
@@ -4,12 +4,9 @@ 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);
@@ -20,76 +17,70 @@ function Navbar() {
   };
 
   return (
-    <>
-      {size.width && size.width < 767 ? (
-        <NavBarMobile />
-      ) : (
+    <div>
+      <div className={styles.overallHeader}>
         <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
+          <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>
-            </div>
-            <div>
-              <Link to="/recruitment" className={styles.Link}>
-                Recruitment
+              <Link to="/signout" className={styles.signOutOption}>
+                Sign Out
               </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>
-      )}
-    </>
+      </div>
+    </div>
   );
 }
 

diff --git a/src/components/shared/NavBarMobile.tsx b/src/components/shared/NavBarMobile.tsx
@@ -1,20 +1,12 @@
-import { useState } from "react";
 import { Link } from "react-router-dom";
-import styles from "css/shared/NavBarMobile.module.css"; // Import CSS module
+import styles from "css/shared/NavBarMobile.module.css";
+import { useToggle } from "@uidotdev/usehooks";
 import personLogo from "/person_logo.png";
 import fintechLogo from "/fintech_logo.png";
 import closeSymbol from "/material-symbols_close.png";
 
 function NavBarMobile() {
-  const [showSideBar, setShowSideBar] = useState(false);
-
-  const toggleSideBar = () => {
-    setShowSideBar(true);
-  };
-
-  const closeSideBar = () => {
-    setShowSideBar(false);
-  };
+  const [showSideBar, toggleSideBar] = useToggle(false);
 
   return (
     <header>
@@ -23,31 +15,29 @@ function NavBarMobile() {
           <img
             src={fintechLogo}
             alt="fintech Logo"
-            className={styles.fintechLogo} // Use curly braces to evaluate the variable
-            onClick={toggleSideBar}
+            className={styles.fintechLogo}
           />
         </div>
         <div>
           {showSideBar ? (
             <img
               src={closeSymbol}
               alt="Close Logo"
-              className={styles.closeLogo} // Use curly braces to evaluate the variable
-              onClick={closeSideBar}
+              className={styles.closeLogo}
+              onClick={() => toggleSideBar(false)}
             />
           ) : (
             <img
               src={personLogo}
               alt="Person Logo"
-              className={styles.personLogo} // Use curly braces to evaluate the variable
+              className={styles.personLogo}
+              onClick={() => toggleSideBar(true)}
             />
           )}
         </div>
       </div>
       {showSideBar && (
         <div className={styles.sidebar}>
-          {" "}
-          {/* Use curly braces to evaluate the variable */}
           <div>
             <Link to="/" className={styles.Link}>
               Home