feat module 2 & 4 : replace visual slider navbar with subcategory navbar - web, mobile

src/components/Navbar/Navbar.jsx

@@ -87,6 +87,40 @@ const getProductTypeMenuLabel = (productType = "") => {
   return normalizeTitle(productType) === "BEAUTY" ? "Essentials" : productType;
 };
 
+const NAV_MENU_STRUCTURE = [
+  {
+    productType: "Apparel",
+    label: "APPAREL",
+    groups: [
+      {
+        label: "Casual",
+        children: [
+          { label: "ND X Marii for Amber", titles: ["ND X MARII FOR AMBER"] },
+          { label: "Somewhere Somehow Someone", titles: ["SOMEWHERE SOMEHOW SOMEONE"] },
+          { label: "Flower Power", titles: ["FLOWER POWER"] },
+        ],
+      },
+      {
+        label: "Traditional",
+        children: [
+          { label: "Eid's Time For Love", titles: ["EID'S TIME FOR LOVE"] },
+          { label: "Raya Romantics", titles: ["RAYA ROMANTICS COLLECTION 2025"] },
+          { label: "Atma Sari", titles: ["ATMA SARI"] },
+          { label: "Oasis abaya collection", titles: ["OASIS ABAYA COLLECTION", "MIRAGE COLLECTION"] },
+        ],
+      },
+    ],
+  },
+  {
+    productType: "BEAUTY",
+    label: "Essentials",
+    children: [
+      { label: "Cosmetics", titles: ["COSMETICS"] },
+      { label: "Hand & Body Lotion", titles: ["HAND & BODY LOTION"] },
+    ],
+  },
+];
+
 const sortCollectionsByPriority = (collection = [], productType = "") => {
   const typeKey = (productType || "").trim().toLowerCase();
   const priorityList = COLLECTION_PRIORITY_BY_TYPE[typeKey] || [];
@@ -165,6 +199,7 @@ function getUniqueCollections(data) {
 const Navbar = () => {
 
   const swiperRef = useRef(null); // Create a ref for the Swiper instance
+  const childTransitionTimerRef = useRef(null);
   const [showHeader, setShowHeader] = useState(true);
   const [showSearch, setShowSearch] = useState(false);
   const [isAtTop, setIsAtTop] = useState(false);
@@ -181,6 +216,8 @@ const Navbar = () => {
   const [openSideCart, setOpenSideCart] = useState(false);
   const [navItem, setNavItem] = useState([]);
   const [navItemCompanyInfo, setNavItemCompanyInfo] = useState([]);
+  const [activeMenu, setActiveMenu] = useState(null);
+  const [activeGroup, setActiveGroup] = useState(null);
 
   const [displayCollection, setDisplayCollection] = useState({
     productType: null,
@@ -342,6 +379,35 @@ const Navbar = () => {
     setDisplayCollection([])
   }
 
+  const handleGroupMouseEnter = (groupLabel) => {
+    if (activeGroup === groupLabel) return;
+
+    if (childTransitionTimerRef.current) {
+      clearTimeout(childTransitionTimerRef.current);
+    }
+
+    setActiveGroup(null);
+    childTransitionTimerRef.current = setTimeout(() => {
+      setActiveGroup(groupLabel);
+    }, 40);
+  }
+
+  const navigateToMenuItem = (productType, item = null) => {
+    sessionStorage.setItem('amber-select-product-type', productType)
+    sessionStorage.removeItem('amber-select-collection')
+    sessionStorage.removeItem('amber-select-collections')
+
+    if (item) {
+      sessionStorage.setItem('amber-select-collection', JSON.stringify({
+        title: item.label,
+        image: null
+      }))
+      sessionStorage.setItem('amber-select-collections', JSON.stringify(item.titles || []))
+    }
+
+    window.location.href = `/products`;
+  }
+
   return (
     <>
       <AppBar position="fixed"
@@ -364,6 +430,8 @@ const Navbar = () => {
         }}
         onMouseLeave={() => {
           hideCollectionList()
+          setActiveMenu(null)
+          setActiveGroup(null)
         }}
       >
 
@@ -444,6 +512,202 @@ const Navbar = () => {
               }}
             >
 
+              {NAV_MENU_STRUCTURE.map((menu) => (
+                <Box
+                  key={menu.label}
+                  sx={{ position: "relative" }}
+                  onMouseEnter={() => {
+                    if (childTransitionTimerRef.current) {
+                      clearTimeout(childTransitionTimerRef.current);
+                    }
+                    setActiveMenu(menu.label);
+                    setActiveGroup(null);
+                  }}
+                >
+                  <Button
+                    sx={{
+                      position: "relative",
+                      ':hover': {
+                        backgroundColor: "rgba(0,0,0,0)",
+                      }
+                    }}
+                    color="inherit"
+                    onClick={() => {
+                      if (!menu.groups && !menu.children) {
+                        navigateToMenuItem(menu.productType)
+                      }
+                    }}
+                  >
+                    <Typography variant="body2"
+                      className="navItem"
+                      sx={{
+                        fontSize: {
+                          xs: "0.73rem",
+                          sm: "0.73rem",
+                          md: "0.875rem",
+                        },
+                        color: (isAtTop) ? "white" : "black",
+                        transition: "all 0.3s ease-in-out",
+                        ":hover": {
+                          color: "#95AAC5 !important"
+                        },
+                        "&::after": {
+                          content: '""',
+                          position: "absolute",
+                          left: "50%",
+                          transform: "translateX(-50%)",
+                          bottom: 2,
+                          width: activeMenu === menu.label ? "70%" : "0%",
+                          height: "2px",
+                          backgroundColor: "#95AAC5",
+                          transition: "width 0.3s ease-in-out",
+                        },
+                        ":hover::after": {
+                          width: "70%",
+                        },
+                      }}>{menu.label}</Typography>
+                  </Button>
+
+                  {(
+                    <>
+                      <Box
+                        sx={{
+                          position: "absolute",
+                          top: "100%",
+                          left: 0,
+                          width: menu.groups ? (activeGroup ? 560 : 260) : 260,
+                          height: 28,
+                          zIndex: 1000,
+                          backgroundColor: "transparent",
+                          visibility: activeMenu === menu.label ? "visible" : "hidden",
+                          pointerEvents: activeMenu === menu.label ? "auto" : "none",
+                        }}
+                      />
+                      <Box
+                        sx={{
+                          position: "absolute",
+                          top: 60,
+                          left: 0,
+                          width: menu.groups ? (activeGroup ? 560 : 260) : 260,
+                          backgroundColor: "#FFF",
+                          color: "#000",
+                          border: "1px solid rgba(0,0,0,0.08)",
+                          borderTop: 0,
+                          boxShadow: "0 2px 6px rgba(0,0,0,0.12)",
+                          display: "flex",
+                          minHeight: "auto",
+                          zIndex: 1001,
+                          overflow: "hidden",
+                          opacity: activeMenu === menu.label ? 1 : 0,
+                          visibility: activeMenu === menu.label ? "visible" : "hidden",
+                          pointerEvents: activeMenu === menu.label ? "auto" : "none",
+                          clipPath: activeMenu === menu.label ? "polygon(0 0, 100% 0, 100% 100%, 0 100%)" : "polygon(0 0, 100% 0, 100% 0, 0 0)",
+                          transition: activeGroup ? "clip-path .45s ease-in-out, visibility .45s ease-in-out, opacity .45s ease-in-out, width .55s ease-in-out" : "clip-path .45s ease-in-out, visibility .45s ease-in-out, opacity .45s ease-in-out",
+                        }}
+                      >
+                      {menu.groups ? (
+                        <>
+                          <Box sx={{ width: 260, pb: 1.5, borderRight: "1px solid rgba(0,0,0,0.12)" }}>
+                            {menu.groups.map((group) => (
+                              <Button
+                                key={group.label}
+                                fullWidth
+                                onMouseEnter={() => handleGroupMouseEnter(group.label)}
+                                sx={{
+                                  justifyContent: "space-between",
+                                  color: activeGroup === group.label ? "#95AAC5" : "#000",
+                                  textTransform: "none",
+                                  fontSize: "0.875rem",
+                                  py: 1.5,
+                                  px: 3,
+                                  '&:hover': {
+                                    backgroundColor: "transparent",
+                                    color: "#95AAC5",
+                                  }
+                                }}
+                              >
+                                {group.label?.toUpperCase()}
+                                <KeyboardArrowRightIcon sx={{ fontSize: 20 }} />
+                              </Button>
+                            ))}
+                          </Box>
+
+                          {activeGroup && (
+                            <Box key={activeGroup} sx={{
+                              pb: 1.5,
+                              px: 3,
+                              width: 300,
+                              clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
+                              overflow: "hidden",
+                              position: "relative",
+                              animation: "childCardReveal .55s ease-in-out",
+                              "@keyframes childCardReveal": {
+                                "0%": {
+                                  clipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)",
+                                },
+                                "100%": {
+                                  clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
+                                },
+                              },
+                            }}>
+                              {menu.groups
+                                .find((group) => group.label === activeGroup)
+                                ?.children.map((item) => (
+                                  <Button
+                                    key={item.label}
+                                    fullWidth
+                                    onClick={() => navigateToMenuItem(menu.productType, item)}
+                                    sx={{
+                                      justifyContent: "flex-start",
+                                      color: "#000",
+                                      textTransform: "none",
+                                      fontSize: "0.875rem",
+                                      py: 1.1,
+                                      px: 0,
+                                      '&:hover': {
+                                        backgroundColor: "transparent",
+                                        color: "#95AAC5",
+                                      }
+                                    }}
+                                  >
+                                    {item.label?.toUpperCase()}
+                                  </Button>
+                                ))}
+                            </Box>
+                          )}
+                        </>
+                      ) : (
+                        <Box sx={{ pb: 1.5, px: 3, width: 260 }}>
+                          {menu.children.map((item) => (
+                            <Button
+                              key={item.label}
+                              fullWidth
+                              onClick={() => navigateToMenuItem(menu.productType, item)}
+                              sx={{
+                                justifyContent: "flex-start",
+                                color: "#000",
+                                textTransform: "none",
+                                fontSize: "0.875rem",
+                                py: 1.1,
+                                px: 0,
+                                '&:hover': {
+                                  backgroundColor: "transparent",
+                                  color: "#95AAC5",
+                                }
+                              }}
+                            >
+                              {item.label?.toUpperCase()}
+                            </Button>
+                          ))}
+                        </Box>
+                      )}
+                      </Box>
+                    </>
+                  )}
+                </Box>
+              ))}
+
+              {/*
               {navItem.map(({ productType, collection }) => (<Button
                 sx={{
                   position: "relative",
@@ -481,12 +745,12 @@ const Navbar = () => {
                       transform: "translateX(-50%)",
                       bottom: 2,
                       width: "0%",
-                      height: "2px", // Thickness of the underline
+                      height: "2px",
                       backgroundColor: "#95AAC5",
                       transition: "width 0.3s ease-in-out",
                     },
                     ":hover::after": {
-                      width: "50%", // Expands on hover
+                      width: "50%",
                     },
                   }}>{getProductTypeMenuLabel(productType)}</Typography>
               </Button>))}
@@ -523,15 +787,16 @@ const Navbar = () => {
                       transform: "translateX(-50%)",
                       bottom: 2,
                       width: "0%",
-                      height: "2px", // Thickness of the underline
+                      height: "2px",
                       backgroundColor: "#95AAC5",
                       transition: "width 0.3s ease-in-out",
                     },
                     ":hover::after": {
-                      width: "70%", // Expands on hover
+                      width: "70%",
                     },
                   }}>{name}</Typography>
               </Button>))}
+              */}
 
 
 
@@ -638,7 +903,7 @@ const Navbar = () => {
       </AppBar>
       {showSearch && <SearchProduct onClose={() => { setShowSearch(false) }} />}
 
-      <MobileNav open={openSideMenu} menu={navItem} infomenu={navItemCompanyInfo} onClose={() => { setOpenSideMenu(false) }} />
+      <MobileNav open={openSideMenu} menu={NAV_MENU_STRUCTURE} infomenu={navItemCompanyInfo} onClose={() => { setOpenSideMenu(false) }} />
       <SideCart open={openSideCart} onClose={() => { setOpenSideCart(false) }} />
 
     </>

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

@@ -10,6 +10,46 @@ const getProductTypeMenuLabel = (productType = "") => {
 };
 
 const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
+  const [expandedMenu, setExpandedMenu] = React.useState(null);
+  const [expandedGroup, setExpandedGroup] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!open) {
+      setExpandedMenu(null);
+      setExpandedGroup(null);
+    }
+  }, [open]);
+
+  const handleClose = () => {
+    setExpandedMenu(null);
+    setExpandedGroup(null);
+    onClose();
+  }
+
+  const navigateToMenuItem = (productType, item = null) => {
+    sessionStorage.setItem('amber-select-product-type', productType)
+    sessionStorage.removeItem('amber-select-collection')
+    sessionStorage.removeItem('amber-select-collections')
+
+    if (item) {
+      sessionStorage.setItem('amber-select-collection', JSON.stringify({
+        title: item.label,
+        image: null
+      }))
+      sessionStorage.setItem('amber-select-collections', JSON.stringify(item.titles || []))
+    }
+
+    window.location.href = `/products`;
+  }
+
+  const handleMenuToggle = (label) => {
+    setExpandedMenu((current) => current === label ? null : label);
+    setExpandedGroup(null);
+  }
+
+  const handleGroupToggle = (label) => {
+    setExpandedGroup((current) => current === label ? null : label);
+  }
 
   // React.useEffect(()=>{
 
@@ -69,108 +109,214 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
   return (
     <Drawer
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       sx={{
         "& .MuiDrawer-paper": {
           backgroundColor: "white",
           color: "white",
-          width: "100%",
+          width: "100vw",
+          maxWidth: "100vw",
+          overflowX: "hidden",
         },
       }}
     >
       {/* Logo Section */}
-      <Box sx={{ height: 80, px: 2 }}>
-        <Grid
-          container
-          alignItems="center"
-          justifyContent="space-between"
-          sx={{ height: "100%" }}
+      <Box sx={{ height: 80, px: 2, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
+        <a href="/">
+          <img
+            src={logoSrc}
+            alt="Logo"
+            style={{
+              width: 150,
+              height: 25,
+            }}
+          />
+        </a>
+        <button
+          onClick={handleClose}
+          style={{
+            background: "none",
+            border: "none",
+            fontSize: 24,
+            cursor: "pointer",
+            position: "absolute",
+            right: 20,
+          }}
         >
-          {/* 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>
+          &#x2715; {/* Unicode for "X" symbol */}
+        </button>
       </Box>
 
 
       {/* Main Navigation */}
-      <Box sx={{ width: "100%" }} role="presentation">
-        {menu.map(({ productType, collection }) => (
-          <Accordion
-            disableGutters={true}
-            onClick={() => {
-              sessionStorage.setItem('amber-select-product-type', productType)
-              if (collection?.length == 0) {
-                window.location.href = `/products`;
-                sessionStorage.removeItem('amber-select-collection')
-              }
-            }}
-            sx={{
-              backgroundColor: "rgba(0,0,0,0)",
-              boxShadow: "none"
-            }}>
-            <AccordionSummary
-              expandIcon={(collection?.length > 0) ? <ExpandMoreIcon /> : ""}
-              aria-controls="panel1-content"
-              id="panel1-header"
-            >
-              <Typography
-                onClick={() => {
-                  sessionStorage.setItem('amber-select-product-type', productType)
-                  window.location.href = `/products`;
-                  sessionStorage.removeItem('amber-select-collection')
-                }}
-                variant="body1"
+      <Box sx={{ width: "100%", boxSizing: "border-box", px: 3, pt: 5, pb: 4, overflowX: "hidden" }} role="presentation">
+        {menu.map(({ productType, label, groups, children }) => {
+          const menuLabel = (label || getProductTypeMenuLabel(productType))?.toUpperCase();
+          const isMenuExpanded = expandedMenu === menuLabel;
+
+          return (
+            <Box key={menuLabel}>
+              <Box
+                onClick={() => handleMenuToggle(menuLabel)}
                 sx={{
-                  fontSize: {
-                    xs: "0.73rem",
-                    sm: "0.73rem",
-                    md: "0.875rem",
-                  },
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  boxSizing: "border-box",
+                  py: 2,
+                  cursor: "pointer",
                 }}
               >
-                {getProductTypeMenuLabel(productType)?.toUpperCase()}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              {(collection?.length > 0) &&
-                <Grid container sx={{ maxHeight: "1000px", overflow: "scroll", overflowX: "hidden" }}>
-                  {collection?.map((colletion) => {
-                    return renderCollectionDisplay(colletion)
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color: "#4B2F34",
+                    fontSize: "1.05rem",
+                    letterSpacing: 0,
+                    fontWeight: "400",
+                  }}
+                >
+                  {menuLabel}
+                </Typography>
+                <Typography
+                  component="span"
+                  sx={{
+                    color: "#4B2F34",
+                    fontSize: "1.8rem",
+                    lineHeight: 1,
+                    fontWeight: "300",
+                  }}
+                >
+                  {isMenuExpanded ? "-" : "+"}
+                </Typography>
+              </Box>
+
+              {isMenuExpanded && (
+                <Box>
+                  {groups?.map((group) => {
+                    const isGroupExpanded = expandedGroup === group.label;
+
+                    return (
+                      <Box key={group.label}>
+                        <Box
+                          onClick={() => handleGroupToggle(group.label)}
+                          sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            boxSizing: "border-box",
+                            py: 2,
+                            pl: 4,
+                            cursor: "pointer",
+                          }}
+                        >
+                          <Typography
+                            variant="body1"
+                            sx={{
+                              color: "#4B2F34",
+                              fontSize: "1rem",
+                              letterSpacing: 0,
+                              fontWeight: "400",
+                            }}
+                          >
+                            {group.label?.toUpperCase()}
+                          </Typography>
+                          <Typography
+                            component="span"
+                            sx={{
+                              color: "#4B2F34",
+                              fontSize: "1.65rem",
+                              lineHeight: 1,
+                              fontWeight: "300",
+                            }}
+                          >
+                            {isGroupExpanded ? "-" : "+"}
+                          </Typography>
+                        </Box>
+
+                        {isGroupExpanded && (
+                          <Box sx={{ ml: 7, pl: 4, borderLeft: "1px solid #777", mb: 2 }}>
+                            {group.children.map((item) => (
+                              <Button
+                                key={item.label}
+                                fullWidth
+                                onClick={() => navigateToMenuItem(productType, item)}
+                                sx={{
+                                  justifyContent: "flex-start",
+                                  color: "#4B2F34",
+                                  textTransform: "none",
+                                  px: 0,
+                                  py: 1.5,
+                                  fontSize: "1rem",
+                                  fontWeight: "400",
+                                  textAlign: "left",
+                                  '& .MuiButton-startIcon, & .MuiButton-endIcon': {
+                                    margin: 0,
+                                  },
+                                  '& .MuiButtonBase-root': {
+                                    textAlign: "left",
+                                  },
+                                  '& .MuiButton-label': {
+                                    width: "100%",
+                                    textAlign: "left",
+                                  },
+                                  '&:hover': {
+                                    backgroundColor: "transparent",
+                                    color: "#95AAC5",
+                                  }
+                                }}
+                              >
+                                <Box component="span" sx={{ display: "block", width: "100%", textAlign: "left" }}>
+                                  {item.label?.toUpperCase()}
+                                </Box>
+                              </Button>
+                            ))}
+                          </Box>
+                        )}
+                      </Box>
+                    )
                   })}
-                </Grid>
-              }
-            </AccordionDetails>
-          </Accordion>
-        ))}
+
+                  {children?.length > 0 && (
+                    <Box sx={{ ml: 7, pl: 4, borderLeft: "1px solid #777", mb: 2 }}>
+                      {children.map((item) => (
+                        <Button
+                          key={item.label}
+                          fullWidth
+                          onClick={() => navigateToMenuItem(productType, item)}
+                          sx={{
+                            justifyContent: "flex-start",
+                            color: "#4B2F34",
+                            textTransform: "none",
+                            px: 0,
+                            py: 1.5,
+                            fontSize: "1rem",
+                            fontWeight: "400",
+                            textAlign: "left",
+                            '& .MuiButton-label': {
+                              width: "100%",
+                              textAlign: "left",
+                            },
+                            '&:hover': {
+                              backgroundColor: "transparent",
+                              color: "#95AAC5",
+                            }
+                          }}
+                        >
+                          <Box component="span" sx={{ display: "block", width: "100%", textAlign: "left" }}>
+                            {item.label?.toUpperCase()}
+                          </Box>
+                        </Button>
+                      ))}
+                    </Box>
+                  )}
+                </Box>
+              )}
+            </Box>
+          )
+        })}
 
         {infomenu.map(({ name, link }) => (
           <Accordion

src/components/ProductList/ProductList.jsx

@@ -34,6 +34,19 @@ function getAllCollection(data) {
   return uniqueCollection;
 }
 
+function getSelectedCollectionTitles() {
+  const storedCollections = sessionStorage.getItem("amber-select-collections");
+
+  if (!storedCollections) return [];
+
+  try {
+    const collectionTitles = JSON.parse(storedCollections);
+    return Array.isArray(collectionTitles) ? collectionTitles : [];
+  } catch (error) {
+    return [];
+  }
+}
+
 const BootstrapInput = styled(InputBase)(({ theme }) => ({
   "label + &": {
     marginTop: theme.spacing(3),
@@ -113,6 +126,7 @@ const ProductList = ({ size = 99999 }) => {
   const filterProducts = () => {
     if (products?.length > 0) {
       let productType = sessionStorage.getItem("amber-select-product-type");
+      const selectedCollectionTitles = getSelectedCollectionTitles();
 
       let newFilteredProducts = products.filter(
         (product) => product.productType === productType
@@ -131,6 +145,13 @@ const ProductList = ({ size = 99999 }) => {
 
       // Collection
       newFilteredProducts = newFilteredProducts.filter((product) => {
+        if (selectedCollectionTitles.length > 0) {
+          return (
+            product.productType === productType &&
+            product.collections.some((data) => selectedCollectionTitles.includes(data?.title))
+          );
+        }
+
         if (collection == "all" || collection == "collection") {
           return product.productType === productType;
         } else {

src/pages/Products/index.jsx

@@ -40,7 +40,7 @@ const Products = () => {
           lg: 10
         }
       }}>
-        {collection && <PageTitle title={collection?.title} image={collection?.image?.url} />}
+        {collection?.image?.url && <PageTitle title={collection?.title} image={collection?.image?.url} />}
         <ProductList />
         <SocialMedia />
         {/*