feat module 6, 7 : smooth the side menu collapse movement - mobile view

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Drawer, Box, List, ListItem, ListItemButton, ListItemText, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Typography, Button } from "@mui/material";
+import { Drawer, Box, List, ListItem, ListItemButton, ListItemText, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Typography, Button, Collapse } from "@mui/material";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Grid from '@mui/material/Grid2';
@@ -89,6 +89,13 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [], products = [] }) =
     setExpandedGroup((current) => current === label ? null : label);
   }
 
+  // Function to generate styles for the collapse content based on expansion state
+  const collapseContentSx = (isExpanded) => ({
+    opacity: isExpanded ? 1 : 0, // Adjusted opacity for smoother effect
+    transform: isExpanded ? "translateY(0)" : "translateY(-4px)", // Adjusted transform for smoother effect
+    transition: "opacity 360ms ease, transform 360ms ease" // Adjusted transition duration for smoother effect 
+  })
+
   // React.useEffect(()=>{
 
   //   console.log(menu)
@@ -146,8 +153,16 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [], products = [] }) =
 
   return (
     <Drawer
+      anchor="left"
       open={open}
       onClose={handleClose}
+      transitionDuration={{
+        enter: 600,
+        exit: 580
+      }}
+      ModalProps={{
+        keepMounted: true
+      }}
       sx={{
         "& .MuiDrawer-paper": {
           backgroundColor: "white",
@@ -232,8 +247,9 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [], products = [] }) =
                 </Typography>
               </Box>
 
-              {isMenuExpanded && (
-                <Box>
+              {/* Menu Items */}
+              <Collapse in={isMenuExpanded} timeout={660}> 
+                <Box sx={collapseContentSx(isMenuExpanded)}>
                   {groups?.map((group) => {
                     const isGroupExpanded = expandedGroup === group.label;
 
@@ -276,8 +292,9 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [], products = [] }) =
                           </Typography>
                         </Box>
 
-                        {isGroupExpanded && (
-                          <Box sx={{ ml: 7, pl: 4, borderLeft: "1px solid #777", mb: 2 }}>
+                        {/* Group Children */}
+                        <Collapse in={isGroupExpanded} timeout={500}>
+                          <Box sx={{ ml: 7, pl: 4, borderLeft: "1px solid #777", mb: 2, ...collapseContentSx(isGroupExpanded) }}>
                             {group.children.map((item) => (
                               <Button
                                 key={item.label}
@@ -314,7 +331,7 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [], products = [] }) =
                               </Button>
                             ))}
                           </Box>
-                        )}
+                        </Collapse>
                       </Box>
                     )
                   })}
@@ -353,7 +370,7 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [], products = [] }) =
                     </Box>
                   )}
                 </Box>
-              )}
+              </Collapse>
             </Box>
           )
         })}