fix navbar hover styling

src/components/Navbar/Navbar.jsx

@@ -263,7 +263,10 @@ const Navbar = () => {
             backdropFilter: "none !important",
             '& .navItem':{
               color:"black !important"
-            }
+            },
+            '& .navItem:hover':{
+              color:"#95AAC5 !important"
+            },
           }
         }}
         onMouseLeave={() => {
@@ -312,9 +315,10 @@ const Navbar = () => {
 
             <IconButton
               onClick={() => setOpen(true)}
+              className="navItem"
               sx={{
                 backgroundColor: "transparent",
-                color: "white",
+                color: (isAtTop) ? "white" : "black",
                 "&:hover": {
                   backgroundColor: "rgba(0, 0, 0, 0.1)",
                 },
@@ -343,7 +347,6 @@ const Navbar = () => {
                 position: "relative",
                 ':hover': {
                   backgroundColor: "rgba(0,0,0,0)",
-                  color: "#95AAC5"
                 }
               }}
               color="inherit"
@@ -363,7 +366,7 @@ const Navbar = () => {
                   color: (isAtTop) ? "white" : "black",
                   transition: "all 0.3s ease-in-out",
                   ":hover": {
-                    color: "#95AAC5"
+                    color: "#95AAC5 !important"
                   }
                 }}>{productType}</Typography>
             </Button>))}
@@ -402,12 +405,14 @@ const Navbar = () => {
 
             <IconButton>
               <SearchIcon className="navItem" style={{
+                transition: "all 0.3s ease-in-out",
                 color: (isAtTop) ? "white" : "black",
               }} />
             </IconButton>
 
             <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
               <LocalMallIcon className="navItem" style={{
+                transition: "all 0.3s ease-in-out",
                 color: (isAtTop) ? "white" : "black",
               }} />
             </Badge>

src/components/Navbar/components/MobileNav/MobileNav.jsx

@@ -7,11 +7,12 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
     <Drawer
       open={open}
       onClose={onClose}
+      onClick={()=>{onClose()}}
       sx={{
         "& .MuiDrawer-paper": {
-          backgroundColor: "black",
+          backgroundColor: "white",
           color: "white",
-          width: 250,
+          width: "100%",
         },
       }}
     >