navbar style

src/components/Navbar/Navbar.jsx

@@ -206,30 +206,23 @@ const Navbar = () => {
             position: "relative",
             cursor: "pointer",
             transition: "transform 0.3s ease",
-            ":hover": {
-              transform: "scale(1.1)"
-            }
           }}
           onClick={() => {
             sessionStorage.setItem('amber-select-collection', JSON.stringify(colletion))
             sessionStorage.setItem('amber-select-product-type', displayCollection.productType)
             window.location.href = `/products`;
           }}
+        ></Box>
+        <Typography
+          variant="body1"
+          sx={{
+            mt:1,
+            color: "black",
+            fontWeight: "400",
+          }}
         >
-          <Typography
-            variant="body1"
-            sx={{
-              color: "white",
-              fontWeight: "bolder",
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)"
-            }}
-          >
-            {colletion?.title?.toUpperCase()}
-          </Typography>
-        </Box>
+          {colletion?.title?.toUpperCase()}
+        </Typography>
       </SwiperSlide>
     )
 
@@ -383,13 +376,27 @@ const Navbar = () => {
                 <Typography variant="body2"
                   className="navItem"
                   sx={{
-                    fontSize:"0.95rem",
+                    fontSize: "0.95rem",
                     fontWeight: "400",
                     color: (isAtTop) ? "white" : "black",
                     transition: "all 0.3s ease-in-out",
                     ":hover": {
                       color: "#95AAC5 !important"
-                    }
+                    },
+                    "&::after": {
+                      content: '""',
+                      position: "absolute",
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                      bottom: 2,
+                      width: "0%",
+                      height: "2px", // Thickness of the underline
+                      backgroundColor: "#95AAC5",
+                      transition: "width 0.3s ease-in-out",
+                    },
+                    ":hover::after": {
+                      width: "50%", // Expands on hover
+                    },
                   }}>{productType}</Typography>
               </Button>))}
 
@@ -497,7 +504,7 @@ const Navbar = () => {
       {showSearch && <SearchProduct onClose={() => { setShowSearch(false) }} />}
 
       <MobileNav open={openSideMenu} menu={navItem} onClose={() => { setOpenSideMenu(false) }} />
-      <SideCart open={openSideCart} onClose={()=>{setOpenSideCart(false)}}/>
+      <SideCart open={openSideCart} onClose={() => { setOpenSideCart(false) }} />
 
     </>
   );