fix mobile nav collection select

src/App.js

@@ -40,6 +40,7 @@ function App() {
 
     }
 
+
   }, [])
 
   return (

src/components/Navbar/Navbar.jsx

@@ -206,7 +206,7 @@ const Navbar = () => {
             }
           }}
           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

@@ -36,7 +36,7 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
           }
         }}
         onClick={() => {
-          sessionStorage.setItem('amber-select-collection', colletion?.title)
+          sessionStorage.setItem('amber-select-collection', JSON.stringify(colletion))
           window.location.href = `/products`;
         }}
       >
@@ -120,8 +120,10 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
             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)",
@@ -132,7 +134,17 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
               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

@@ -7,6 +7,7 @@ const PageTitle = ({title = "", image = null}) => {
 
   return (
     <Box
+      className="animate__animated animate__fadeIn"
       sx={{
         position: "relative",
         minHeight: "300px",
@@ -17,7 +18,6 @@ const PageTitle = ({title = "", image = null}) => {
         textAlign: "center",
         overflow: "hidden", // Ensures the dim layer stays inside the box
         display:"flex",
-        mt:5
       }}
     >
       {/* Overlay */}

src/components/ProductList/ProductList.jsx

@@ -90,7 +90,8 @@ const ProductList = ({ size = 99999 }) => {
         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)
       }
 
     }
@@ -160,7 +161,7 @@ const ProductList = ({ size = 99999 }) => {
   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
@@ -319,7 +320,7 @@ const ProductList = ({ size = 99999 }) => {
             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

@@ -16,6 +16,7 @@ import '@fontsource/roboto/500.css';
 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

@@ -8,13 +8,18 @@ import Feature from '../../components/Feature'
 
 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 = '/'
     }
@@ -24,7 +29,7 @@ const Products = () => {
   return (
     <>
       <Box sx={{
-        mt:15,
+        mt:10,
         px: {
           xs: 2,
           md: 12,
@@ -36,6 +41,7 @@ const Products = () => {
           lg: 10
         }
       }}>
+        {collection && <PageTitle title={collection?.title} image={collection?.image?.url} /> }
         <ProductList />
         <SocialMedia />
         <Feature />