fix mobile nav collection select

src/App.js

 
     }
 
+
   }, [])
 
   return (

src/components/Navbar/Navbar.jsx

             }
           }}
           onClick={() => {
-            sessionStorage.setItem('amber-select-collection', colletion?.title)
+            sessionStorage.setItem('amber-select-collection', JSON.stringify(colletion))
             sessionStorage.setItem('amber-select-product-type', displayCollection.productType)
             window.location.href = `/products`;
           }}

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

           }
         }}
         onClick={() => {
-          sessionStorage.setItem('amber-select-collection', colletion?.title)
+          sessionStorage.setItem('amber-select-collection', JSON.stringify(colletion))
           window.location.href = `/products`;
         }}
       >
             disableGutters={true}
             onClick={() => {
               sessionStorage.setItem('amber-select-product-type', productType)
-              sessionStorage.removeItem('amber-select-collection')
-              if (collection?.length == 0) window.location.href = `/products`;
+              if (collection?.length == 0) {
+                window.location.href = `/products`;
+                sessionStorage.removeItem('amber-select-collection')
+              } 
             }}
             sx={{
               backgroundColor: "rgba(0,0,0,0)",
               aria-controls="panel1-content"
               id="panel1-header"
             >
-              <Typography variant="body1" sx={{ fontWeight: "500" }} >{productType?.toUpperCase()}</Typography>
+              <Typography 
+                onClick={() => {
+                  sessionStorage.setItem('amber-select-product-type', productType)
+                  window.location.href = `/products`;
+                  sessionStorage.removeItem('amber-select-collection')
+                }} 
+                variant="body1" 
+                sx={{ fontWeight: "500" }}
+              >
+                {productType?.toUpperCase()}
+              </Typography>
             </AccordionSummary>
             <AccordionDetails>
               {(collection?.length > 0) &&

src/components/PageTitle/PageTitle.jsx

 
   return (
     <Box
+      className="animate__animated animate__fadeIn"
       sx={{
         position: "relative",
         minHeight: "300px",
         textAlign: "center",
         overflow: "hidden", // Ensures the dim layer stays inside the box
         display:"flex",
-        mt:5
       }}
     >
       {/* Overlay */}

src/components/ProductList/ProductList.jsx

         const collectionList = getAllCollection(newFilteredProducts);
         setCollectionFilterOption(collectionList);
       } else {
-        setCollection(sessionStorage.getItem('amber-select-collection'))
+        const selectedColletion = JSON.parse(sessionStorage.getItem('amber-select-collection'))
+        setCollection(selectedColletion?.title)
       }
 
     }
   const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
 
     return (
-      <Grid className="animate__animated animate__fadeIn" de item size={{ xs: 6, sm: 6, md: 3 }}>
+      <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
 
         <a href={`/products/${handle}`} style={{textDecoration:"none",color:"#000"}}>
           <Box
             let maxPrice = maxVariantPrice.amount
             let maxPriceCurrency = maxVariantPrice.currencyCode
 
-            let img_url = images[0]?.url
+            let img_url = images[0].url
             let collection_name = collections[0]?.title
 
             if (index < size) {

src/index.js

 import '@fontsource/roboto/700.css';
 // import reportWebVitals from './reportWebVitals';
 
+// JS MODULE STUFF
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/pages/Products/index.jsx

 
 const Products = () => {
 
+  const [collection, setCollection] = useState(null)
+
   useEffect(()=>{
     
     // if user come from select collection
     if(sessionStorage.getItem('amber-select-product-type')){
 
-      let selectProductType = sessionStorage.getItem('amber-select-product-type')
-
+      if(sessionStorage.getItem('amber-select-collection')){
+        let selectCollection = JSON.parse(sessionStorage.getItem('amber-select-collection'))
+        setCollection(selectCollection)
+      }
+      
     }else{
       window.location.href = '/'
     }
   return (
     <>
       <Box sx={{
-        mt:15,
+        mt:10,
         px: {
           xs: 2,
           md: 12,
           lg: 10
         }
       }}>
+        {collection && <PageTitle title={collection?.title} image={collection?.image?.url} /> }
         <ProductList />
         <SocialMedia />
         <Feature />