mobile nav collections

src/components/Navbar/Navbar.jsx

 
   const renderCollectionDisplay = (colletion) => {
 
-    let { title, image } = colletion
-
     return (
       <SwiperSlide>
         <Box
           className="animate__animated animate__fadeIn animate__fast"
           sx={{
-            backgroundImage: `url(${image.url})`,
+            backgroundImage: `url(${colletion?.image?.url})`,
             backgroundSize: "cover",
             backgroundRepeat: "no-repeat",
             backgroundPosition: "center center",
             }
           }}
           onClick={() => {
-            sessionStorage.setItem('amber-select-collection', title)
+            sessionStorage.setItem('amber-select-collection', colletion?.title)
             sessionStorage.setItem('amber-select-product-type', displayCollection.productType)
             window.location.href = `/products`;
           }}
               transform: "translate(-50%, -50%)"
             }}
           >
-            {title.toUpperCase()}
+            {colletion?.title?.toUpperCase()}
           </Typography>
         </Box>
       </SwiperSlide>

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

 import React from "react";
-import { Drawer, Box, List, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { Drawer, Box, List, ListItem, ListItemButton, ListItemText, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Typography, Button } from "@mui/material";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Grid from '@mui/material/Grid2';
 import logoSrc from "../../../../assets/images/amberlogo.png";
 
 const MobileNav = ({ open, onClose, menu = [] }) => {
+
+  // React.useEffect(()=>{
+
+  //   console.log(menu)
+  //   debugger
+
+  // },[menu])
+
+  const renderCollectionDisplay = (colletion) => {
+
+    return (
+      <Grid
+        size={6}
+        className="animate__animated animate__fadeIn animate__fast"
+        sx={{
+          padding:5,
+          backgroundImage: `url(${colletion?.image?.url})`,
+          backgroundSize: "cover",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center center",
+          height: "100%",
+          paddingTop: "45%",
+          position: "relative",
+          cursor: "pointer",
+          transition: "transform 0.3s ease",
+          ":hover": {
+            transform: "scale(1.1)"
+          }
+        }}
+        onClick={() => {
+          // sessionStorage.setItem('amber-select-collection', colletion?.title)
+          // sessionStorage.setItem('amber-select-product-type', displayCollection.productType)
+          window.location.href = `/products`;
+        }}
+      >
+        <Typography
+          variant="body1"
+          sx={{
+            color: "white",
+            fontWeight: "bolder",
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)"
+          }}
+        >
+          {colletion?.title?.toUpperCase()}
+        </Typography>
+      </Grid>
+    )
+
+  }
+
   return (
     <Drawer
       open={open}
       onClose={onClose}
-      onClick={()=>{onClose()}}
       sx={{
         "& .MuiDrawer-paper": {
           backgroundColor: "white",
       }}
     >
       {/* Logo Section */}
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: 80,
-        }}
-      >
-        <a href="/">
-          <img
-            src={logoSrc}
-            alt="Logo"
-            style={{
-              width: 150,
-              height: 25,
-            }}
-          />
-        </a>
+      <Box sx={{ height: 80, px: 2 }}>
+        <Grid
+          container
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{ height: "100%" }}
+        >
+          {/* Left Spacer */}
+          <Grid item xs={3} />
+
+          {/* Centered Logo */}
+          <Grid item xs={6} container justifyContent="center">
+            <a href="/">
+              <img
+                src={logoSrc}
+                alt="Logo"
+                style={{
+                  width: 150,
+                  height: 25,
+                }}
+              />
+            </a>
+          </Grid>
 
+          {/* Right 'X' Button */}
+          <Grid item xs={3} container justifyContent="flex-end">
+            <button
+              onClick={() => { onClose() }}
+              style={{
+                background: "none",
+                border: "none",
+                fontSize: 24,
+                cursor: "pointer",
+              }}
+            >
+              &#x2715; {/* Unicode for "X" symbol */}
+            </button>
+          </Grid>
+        </Grid>
       </Box>
 
+
       {/* Main Navigation */}
-      <Box sx={{ width: 250 }} role="presentation">
-        <List>
-          {menu.map(({ title, link }) => (
-            <ListItem key={title} disablePadding>
+      <Box sx={{ width: "100%" }} role="presentation">
+        {/* <List>
+          {menu.map(({ productType, collection }) => (
+            <ListItem key={productType} disablePadding>
               <ListItemButton
-                onClick={() => { window.location.href = link }}
+                onClick={() => { 
+                  sessionStorage.setItem('amber-select-collection', productType)
+                  sessionStorage.removeItem('amber-select-collection')
+                  if(collection?.length == 0) window.location.href = `/products`;
+                }}
                 sx={{
-                  color: "white",
+                  borderTop:"1px solid rgba(0,0,0,0.1)",
                   "&:hover": {
-                    backgroundColor: "white",
-                    color: "black",
+                    backgroundColor: "#95AAC5",
                   },
                 }}
               >
-                <ListItemText sx={{ ml: 2 }} primary={title} />
+                <ListItemText sx={{ 
+                  ml: 2, 
+                  color: "black",
+                }} primary={productType?.toUpperCase()} />
+                {(collection?.length > 0) && <ArrowDropDownIcon fontSize="small" sx={{color:"black"}} /> }
               </ListItemButton>
             </ListItem>
           ))}
-        </List>
+        </List> */}
+        {menu.map(({ productType, collection }) => (
+          <Accordion
+            disableGutters={true}
+            onClick={() => {
+              sessionStorage.setItem('amber-select-collection', productType)
+              sessionStorage.removeItem('amber-select-collection')
+              if (collection?.length == 0) window.location.href = `/products`;
+            }}
+            sx={{
+              backgroundColor: "rgba(0,0,0,0)",
+              boxShadow: "none"
+            }}>
+            <AccordionSummary
+              expandIcon={(collection?.length > 0) ? <ExpandMoreIcon /> : ""}
+              aria-controls="panel1-content"
+              id="panel1-header"
+            >
+              <Typography variant="body1" sx={{ fontWeight: "500" }} >{productType?.toUpperCase()}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              {(collection?.length > 0) &&
+                <Grid container sx={{maxHeight:"1000px", overflow:"scroll", overflowX:"hidden"}}>
+                  {collection?.map((colletion) => {
+                    return renderCollectionDisplay(colletion)
+                  })}
+                </Grid>
+              }
+            </AccordionDetails>
+          </Accordion>
+        ))}
+
       </Box>
     </Drawer>
   );

src/components/PageTitle/PageTitle.jsx

           color: image ? "white" : "black"
         }}
       >
-        {title.toUpperCase() || " "}
+        {title?.toUpperCase() || " "}
       </Typography>
     </Box>
   );

src/components/ProductList/ProductList.jsx

   const products = data || [];
   const allCollection = products.flatMap(product => product.collections);
   const uniqueCollection = Array.from(
-    new Map(allCollection.map(item => [item.title, item])).values()
+    new Map(allCollection.map(item => [item?.title, item])).values()
   );
   return uniqueCollection;
 }
         (product) => product.productType === productType
       );
 
-      setFilteredProducts(newFilteredProducts)
+      setTimeout(()=>{
+        setFilteredProducts(newFilteredProducts)
+      },100)
 
       const tagList = getAllTags(newFilteredProducts);
       setTagFilterOption(tagList);
           if (collection == 'all') {
             return product.productType === productType
           } else {
-            return product.productType === productType && product.collections.some(data => data.title === collection)
+            return product.productType === productType && product.collections.some(data => data?.title === collection)
           }
 
         }
         newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
       }
 
-      setFilteredProducts(newFilteredProducts)
+      
+      setFilteredProducts([]) //cause I want those fadeIn animation
+      setTimeout(()=>{
+        setFilteredProducts(newFilteredProducts)
+      },100)
 
     }
 
   const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
 
     return (
-      <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
+      <Grid className="animate__animated animate__fadeIn" de item size={{ xs: 6, sm: 6, md: 3 }}>
 
         <a href={`/products/${handle}`} style={{textDecoration:"none",color:"#000"}}>
           <Box
             let maxPriceCurrency = maxVariantPrice.currencyCode
 
             let img_url = images[0].url
-            let collection_name = collections[0].title
+            let collection_name = collections[0]?.title
 
             if (index < size) {
               return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")

src/components/ProductSelected/ProductSelected.jsx

           let maxPriceCurrency = maxVariantPrice.currencyCode
 
           let img_url = images[0].url
-          let collection_name = collections[0].title
+          let collection_name = collections[0]?.title
 
           // ID
           const parts = id.split('/');