Implemented fixed top navigation bar with React icons for the hamburg…

…er menu
RutikKulkarni · Jul 2, 2024 · 3599cf4 · 3599cf4
1 parent c0c8763
commit 3599cf4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
@@ -13,7 +13,9 @@ import {
   BiUser,
   LiaInfoCircleSolid,
   Widget,
-  isLoggedIn
+  isLoggedIn,
+  CgMenuRightAlt,
+  IoIosClose,
 }
 from './imports'
 
@@ -150,9 +152,7 @@ const Navbar = () => {
           className={`${styles.hamburger} ${isActive ? styles.active : ""}`}
           onClick={toggleActiveClass}
         >
-          <span className={`${styles.bar}`}></span>
-          <span className={`${styles.bar}`}></span>
-          <span className={`${styles.bar}`}></span>
+          {isActive ? <IoIosClose className={styles.icon} /> : <CgMenuRightAlt className={styles.icon} />}
         </div>
       </div>
     </nav>

diff --git a/frontend/src/components/Navbar/Navbar.module.css b/frontend/src/components/Navbar/Navbar.module.css
@@ -1,8 +1,8 @@
 .navbar {
   width: 100vw;
-  /* position: sticky;
+  position: fixed;
   top: 0;
-  left: 0; */
+  left: 0;
   z-index: 1;
   background-color: var(--navbar-bg-color);
   padding: 10px 20px;
@@ -18,7 +18,7 @@
 }
 
 .logo img {
-  height: 60px;
+  height: 50px;
 }
 
 .navMenu {
@@ -68,6 +68,10 @@
   font-family: Poppins;
 }
 
+.icon {
+  display: none;
+}
+
 .iconUser {
   font-size: 20px;
   cursor: pointer;
@@ -83,12 +87,14 @@
   .navbar {
     justify-content: space-between;
   }
+
   /* hamburger */
   .hamburger {
     display: block;
     cursor: pointer;
     margin-left: 10px;
   }
+
   .bar {
     background-color: var(--text-color);
     width: 20px;
@@ -103,26 +109,31 @@
   .hamburger.active .bar:nth-child(2) {
     opacity: 0;
   }
+
   .hamburger.active .bar:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
   }
+
   .hamburger.active .bar:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
   }
 
   /* navMenu */
   .navMenu {
-    position: absolute;
+    position: fixed;
     flex-direction: column;
     gap: 0;
-    top: 70px;
+    top: 59px;
     left: -100%;
     text-align: start;
     width: 100%;
+    /* height: 100vh; */
     transition: 0.7s ease-in-out;
-    background-color: var(--secondary-color);
+    background-color: var(--navbar-bg-color);
     padding: 10px;
-    margin-top: -8px;
+    margin-top: 0;
+    z-index: 999;
+    overflow-y: auto;
   }
 
   .navMenu.active {
@@ -132,20 +143,45 @@
   .navMenu li {
     margin: 16px 0;
   }
+
   .navBtns {
     width: auto;
     gap: 10px;
   }
+
   .logo img {
     height: 40px;
   }
+
   .navigations {
     display: flex;
     align-items: center;
   }
+
+  .icon {
+    font-size: 26px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color);
+  }
+
   .loginBtn,
   .signupBtn {
     width: 80px;
     padding: 10px;
   }
 }
+
+/* media queries */
+@media screen and (max-width: 350px) {
+  .signupBtn {
+    display: none;
+  }
+
+  .loginBtn {
+    background-color: var(--primary-color);
+    color: #ffffff;
+  }
+}
diff --git a/frontend/src/components/Navbar/imports/index.js b/frontend/src/components/Navbar/imports/index.js
@@ -13,3 +13,5 @@ export { default as navbarStyles } from "../Navbar.module.css";
 export { BiUser } from "react-icons/bi";
 export { LiaInfoCircleSolid } from "react-icons/lia";
 export { default as Widget } from "../../Widget/User/User";
+export { CgMenuRightAlt } from "react-icons/cg";
+export { IoIosClose } from "react-icons/io";