Merge pull request #357 from AnushkaChouhan25/revert

Refactor Navbar for Improved Usability and Design ✨
Yashgabani845 · Nov 10, 2024 · 7a70481 · 7a70481
2 parents 1c6dd35 + 42e783f
commit 7a70481
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 10 deletions.
diff --git a/hiring-portal/src/CSS/navbar.module.css b/hiring-portal/src/CSS/navbar.module.css
@@ -32,6 +32,7 @@
   flex-direction: row;
   align-items: center;
   margin-left: 20px;
+  justify-content: space-around;
   flex-grow: 1;
 }
 
@@ -183,3 +184,30 @@
     display: flex;
   }
 }
+.dropdown {
+  position: relative;
+  cursor: pointer;
+}
+
+.dropdownContent {
+  display: none;
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  margin-top: 1px;
+}
+
+.dropdown:hover .dropdownContent {
+  display: block;
+}
+
+.dropdownContent .icon {
+  padding: 8px 10px; 
+  display: flex;
+  align-items: center;
+}
+
+.dropdownContent .icon:hover {
+  background-color: #f1f1f1;
+}
diff --git a/hiring-portal/src/Components/Navbar.jsx b/hiring-portal/src/Components/Navbar.jsx
@@ -134,15 +134,7 @@ const Navbar = () => {
               </Link>
             </div>
 
-            <div
-              className={`${styles.icon} ${activeTab === "/resume-analyzer" ? styles.active : ""
-                }`}
-            >
-              <Link to="/resume-analyzer">
-                <Dock />
-                <span>Scan Resume</span>
-              </Link>
-            </div>
+
 
             <div
               className={`${styles.icon} ${activeTab === "/blog" ? styles.active : ""
@@ -154,6 +146,30 @@ const Navbar = () => {
               </Link>
             </div>
 
+
+                {/* Explore dropdown menu */}
+      <div className={styles.dropdown}>
+        <div className={styles.icon}>
+          <span>Explore</span>
+        </div>
+        <div className={styles.dropdownContent}>
+          <div
+            className={`${styles.icon} ${activeTab === "/jobcard" ? styles.active : ""}`}
+          >
+            <Link to="/jobcard">
+              <WorkIcon />
+              <span>Jobs</span>
+            </Link>
+          </div> 
+          <div
+              className={`${styles.icon} ${activeTab === "/resume-analyzer" ? styles.active : ""
+                }`}
+            >
+              <Link to="/resume-analyzer">
+                <Dock />
+                <span>Scan Resume</span>
+              </Link>
+            </div>
             <div
               className={`${styles.icon} ${activeTab === "/resume-screening" ? styles.active : ""
                 }`}
@@ -163,9 +179,19 @@ const Navbar = () => {
                 onClick={() => setActiveTab("/resume-analyzer")}
               >
                 <Dock />
-                <span>Resume Screening</span>
+                <span >Resume Screening</span>
               </Link>
             </div>
+          <div
+            className={`${styles.icon} ${activeTab === "/contactus" ? styles.active : ""}`}
+          >
+            <Link to="/contactus">
+              <ContactMailIcon />
+              <span>Contact Us</span>
+            </Link>
+          </div>
+        </div>
+      </div>
 
             <div
               className={`${styles.icon} ${activeTab === "/profile" ? styles.active : ""
@@ -187,6 +213,7 @@ const Navbar = () => {
               <span>Employer/Post Job</span>
               <LaunchIcon className={styles.postingIcon} />
             </div>
+
           </>
         )}
       </div>