Merge pull request JiyaGupta-cs#235 from ShahHetviIT/master

APPERANCE OF NAVBAR DIVS JiyaGupta-cs#222
vijaylaxmi04 · Jun 21, 2024 · 7085da6 · 7085da6
2 parents d45e786 + 750d2a6
commit 7085da6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css
@@ -33,7 +33,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 3px;
+    /* gap: 3px; */
     cursor: pointer;
 }
 .nav-menu li a{text-decoration: none;}
@@ -141,4 +141,10 @@ button{
     height: auto;
 }
 
+.nav-menu hr{
+    margin: 0;
+}
 
+.nav-menu li.active a {
+    color: #ff4141;
+}
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
@@ -36,19 +36,19 @@ const Navbar = () => {
                 </Link>
             </div>
             <ul className="nav-menu">
-                <li onClick={() => { setMenu("shop") }}>
+                <li className={menu === "shop" ? "active" : ""} onClick={() => { setMenu("shop") }}>
                     <Link to='/'>Shop</Link>
                     {menu === "shop" ? <hr /> : <></>}
                 </li>
-                <li onClick={() => { setMenu("men") }}>
+                <li className={menu === "men" ? "active" : ""} onClick={() => { setMenu("men") }}>
                     <Link to='/men'>Men</Link>
                     {menu === "men" ? <hr /> : <></>}
                 </li>
-                <li onClick={() => { setMenu("women") }}>
+                <li className={menu === "women" ? "active" : ""} onClick={() => { setMenu("women") }}>
                     <Link to='/women'>Women</Link>
                     {menu === "women" ? <hr /> : <></>}
                 </li>
-                <li onClick={() => { setMenu("kids") }}>
+                <li className={menu === "kids" ? "active" : ""} onClick={() => { setMenu("kids") }}>
                     <Link to='/kids'>Kids</Link>
                     {menu === "kids" ? <hr /> : <></>}
                 </li>