changed to hover and resized profile logo

NUS-Fintech-Society · Mar 26, 2024 · a357435 · a357435
1 parent 81512ac
commit a357435
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 51 deletions.
diff --git a/src/assets/css/shared/NavBar.module.css b/src/assets/css/shared/NavBar.module.css
@@ -9,9 +9,9 @@
     top: 0; 
     font-family: 'DM Sans', sans-serif;
     height: 98px;
-  }
+
+}
 
-
 .overallHeader div a {
     display: block;
     color: white; 
@@ -21,55 +21,56 @@
     padding: 30px;
     font-weight: 400;
 }
+
 .overallHeader div a:hover {
     color:#F9A72B;
 }
 
 .personLogo {
-    max-width: 54.95px;
-    height: auto;
+    max-width: 100px;
+    padding-top: 22px;
     padding-right: 44px;
 }
 
 .fintechLogo{
     max-width: 146px;
     height: auto;
 }
+
 .profileOptions {
     position: fixed; 
-    top: 98px; 
+    top: 100px; 
     right: 12px; 
-    font-size: 16px;
+    font-size: px;
     background-color: rgb(255, 255, 255);
     box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
-    z-index: 1000; 
+    z-index: 1001; 
     width: 158px;
-    height: 116px;
+    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 {
-    cursor: pointer;
-    text-align: center;
+    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); 
+    background-color: rgba(202, 202, 202, 0.2);
 }
 
-
-/* @media (max-width: 767px) {
-    header {
-      display: none;
-    }
-  } */
-
-
-
-
-
+.personIconContainer {
+    height: 100px;
+}
diff --git a/src/assets/css/shared/NavBarMobile.module.css b/src/assets/css/shared/NavBarMobile.module.css
@@ -1,9 +1,3 @@
-/* @media (min-width: 768px) {
-    header {
-      display: none;
-    }
-  } */
-
 .overallHeader {
     display: flex;
     justify-content: space-between; 
@@ -29,7 +23,7 @@
 
 
 .personLogo {
-    max-width: 54.95px;
+    max-width: 100px;
     height: auto;
     padding-right: 44px;
 }

diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
@@ -1,32 +1,30 @@
-import { useState } from "react";
+/* background-color: rgba(202, 202, 202, 0.2); */
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import styles from "css/shared/NavBar.module.css";
+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 { 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 handleProfileHover = () => {
+    setShowProfileOptions(true);
+  };
 
-  const handleProfile = () => {
-    if (!showProfileOptions) {
-      setShowProfileOptions(true);
-    }
+  const handleProfileLeave = () => {
+    setShowProfileOptions(false);
   };
 
   return (
     <>
-      {size.width && size.width < 767 ? ( // Check window width
+      {size.width && size.width < 767 ? (
         <NavBarMobile />
       ) : (
-        <header>
+        <div>
           <div className={styles.overallHeader}>
             <div>
               <a href="/public">
@@ -67,26 +65,29 @@ function Navbar() {
                 Recruitment
               </Link>
             </div>
-            <div ref={profileOptionsRef}>
+            <div
+              onMouseEnter={handleProfileHover}
+              onMouseLeave={handleProfileLeave}
+              className={styles.personIconContainer}
+            >
               <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 className={styles.profileOptions}>
+                  <Link to="/profile" className={styles.profileOption}>
+                    Profile
+                  </Link>
+                  <Link to="/signout" className={styles.signOutOption}>
+                    Sign Out
+                  </Link>
                 </div>
               )}
             </div>
           </div>
-        </header>
+        </div>
       )}
     </>
   );