feat modules 1, 2, 4 : modified navbar, page view for every menu, exclude sold out products from view all products - web, mobile

src/components/Navbar/Navbar.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Button from "@mui/material/Button";
@@ -103,6 +103,7 @@ const NAV_MENU_STRUCTURE = [
       {
         label: "Traditional",
         children: [
+          // label is the display name, titles are the collection names that will be matched to the product collections in shopify
           { 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"] },
@@ -200,6 +201,8 @@ const Navbar = () => {
 
   const swiperRef = useRef(null); // Create a ref for the Swiper instance
   const childTransitionTimerRef = useRef(null);
+  const appBarRef = useRef(null);
+  const navMenuRefs = useRef({});
   const [showHeader, setShowHeader] = useState(true);
   const [showSearch, setShowSearch] = useState(false);
   const [isAtTop, setIsAtTop] = useState(false);
@@ -218,6 +221,7 @@ const Navbar = () => {
   const [navItemCompanyInfo, setNavItemCompanyInfo] = useState([]);
   const [activeMenu, setActiveMenu] = useState(null);
   const [activeGroup, setActiveGroup] = useState(null);
+  const [dropdownTopOffset, setDropdownTopOffset] = useState(52);
 
   const [displayCollection, setDisplayCollection] = useState({
     productType: null,
@@ -379,6 +383,35 @@ const Navbar = () => {
     setDisplayCollection([])
   }
 
+  const updateDropdownTopOffset = useCallback((menuLabel = activeMenu) => {
+    const appBarNode = appBarRef.current;
+    const menuNode = navMenuRefs.current[menuLabel];
+
+    if (!appBarNode || !menuNode) return;
+
+    const appBarRect = appBarNode.getBoundingClientRect();
+    const menuRect = menuNode.getBoundingClientRect();
+
+    setDropdownTopOffset(Math.max(0, appBarRect.bottom - menuRect.top));
+  }, [activeMenu]);
+
+  useEffect(() => {
+    if (!activeMenu) return;
+
+    const updateOffset = () => {
+      requestAnimationFrame(() => updateDropdownTopOffset(activeMenu));
+    };
+
+    updateOffset();
+    window.addEventListener("scroll", updateOffset, { passive: true });
+    window.addEventListener("resize", updateOffset);
+
+    return () => {
+      window.removeEventListener("scroll", updateOffset);
+      window.removeEventListener("resize", updateOffset);
+    };
+  }, [activeMenu, showHeader, updateDropdownTopOffset]);
+
   const handleGroupMouseEnter = (groupLabel) => {
     if (activeGroup === groupLabel) return;
 
@@ -392,17 +425,49 @@ const Navbar = () => {
     }, 40);
   }
 
+  const findCollectionForMenuItem = (productType, item) => {
+    const targetTitles = (item?.titles || []).map(normalizeTitle);
+
+    return products
+      .filter((product) => product.productType === productType)
+      .flatMap((product) => product.collections || [])
+      .find((collection) => targetTitles.includes(normalizeTitle(collection?.title || "")));
+  }
+
+  const getMenuCollectionTitles = (productType) => {
+    const menu = NAV_MENU_STRUCTURE.find((menuItem) => menuItem.productType === productType);
+
+    if (!menu) return [];
+
+    if (menu.groups) {
+      return menu.groups.flatMap((group) =>
+        group.children.flatMap((item) => item.titles || [])
+      );
+    }
+
+    return (menu.children || []).flatMap((item) => item.titles || []);
+  }
+
   const navigateToMenuItem = (productType, item = null) => {
     sessionStorage.setItem('amber-select-product-type', productType)
     sessionStorage.removeItem('amber-select-collection')
     sessionStorage.removeItem('amber-select-collections')
 
     if (item) {
+      const matchedCollection = findCollectionForMenuItem(productType, item);
+
       sessionStorage.setItem('amber-select-collection', JSON.stringify({
         title: item.label,
-        image: null
+        image: matchedCollection?.image || null
       }))
       sessionStorage.setItem('amber-select-collections', JSON.stringify(item.titles || []))
+    } else {
+      // Main menu click only shows collections that exist in the current navbar menu.
+      const menuCollectionTitles = getMenuCollectionTitles(productType);
+
+      if (menuCollectionTitles.length > 0) {
+        sessionStorage.setItem('amber-select-collections', JSON.stringify(menuCollectionTitles))
+      }
     }
 
     window.location.href = `/products`;
@@ -411,6 +476,7 @@ const Navbar = () => {
   return (
     <>
       <AppBar position="fixed"
+        ref={appBarRef}
         sx={{
           zIndex: 998,
           backgroundColor: (isAtTop) ? "rgba(0, 0, 0, 0)" : "rgba(255, 255, 255, 0.3)",
@@ -515,11 +581,15 @@ const Navbar = () => {
               {NAV_MENU_STRUCTURE.map((menu) => (
                 <Box
                   key={menu.label}
+                  ref={(node) => {
+                    if (node) navMenuRefs.current[menu.label] = node;
+                  }}
                   sx={{ position: "relative" }}
                   onMouseEnter={() => {
                     if (childTransitionTimerRef.current) {
                       clearTimeout(childTransitionTimerRef.current);
                     }
+                    updateDropdownTopOffset(menu.label);
                     setActiveMenu(menu.label);
                     setActiveGroup(null);
                   }}
@@ -533,11 +603,10 @@ const Navbar = () => {
                     }}
                     color="inherit"
                     onClick={() => {
-                      if (!menu.groups && !menu.children) {
-                        navigateToMenuItem(menu.productType)
-                      }
+                      navigateToMenuItem(menu.productType)
                     }}
                   >
+                    {/* Navbar menu label: APPAREL, ESSENTIALS */}
                     <Typography variant="body2"
                       className="navItem"
                       sx={{
@@ -570,23 +639,26 @@ const Navbar = () => {
 
                   {(
                     <>
+                      {/* Invisible hover bridge: keeps dropdown open while moving cursor from menu to submenu */}
                       <Box
                         sx={{
                           position: "absolute",
                           top: "100%",
                           left: 0,
                           width: menu.groups ? (activeGroup ? 560 : 260) : 260,
-                          height: 28,
+                          height: dropdownTopOffset,
                           zIndex: 1000,
                           backgroundColor: "transparent",
                           visibility: activeMenu === menu.label ? "visible" : "hidden",
                           pointerEvents: activeMenu === menu.label ? "auto" : "none",
                         }}
                       />
+                      {/* Submenu dropdown card: controls dropdown position, width, background, and animation */}
                       <Box
                         sx={{
                           position: "absolute",
-                          top: 60,
+                          // Measured from this menu label to the real bottom of the navbar.
+                          top: dropdownTopOffset,
                           left: 0,
                           width: menu.groups ? (activeGroup ? 560 : 260) : 260,
                           backgroundColor: "#FFF",
@@ -607,6 +679,7 @@ const Navbar = () => {
                       >
                       {menu.groups ? (
                         <>
+                          {/* Submenu group list: CASUAL, TRADITIONAL */}
                           <Box sx={{ width: 260, pb: 1.5, borderRight: "1px solid rgba(0,0,0,0.12)" }}>
                             {menu.groups.map((group) => (
                               <Button
@@ -632,6 +705,7 @@ const Navbar = () => {
                             ))}
                           </Box>
 
+                          {/* Child submenu links: collection names shown after hovering a submenu group */}
                           {activeGroup && (
                             <Box key={activeGroup} sx={{
                               pb: 1.5,
@@ -677,6 +751,7 @@ const Navbar = () => {
                           )}
                         </>
                       ) : (
+                        /* Direct submenu links: used by ESSENTIALS */
                         <Box sx={{ pb: 1.5, px: 3, width: 260 }}>
                           {menu.children.map((item) => (
                             <Button
@@ -903,7 +978,7 @@ const Navbar = () => {
       </AppBar>
       {showSearch && <SearchProduct onClose={() => { setShowSearch(false) }} />}
 
-      <MobileNav open={openSideMenu} menu={NAV_MENU_STRUCTURE} infomenu={navItemCompanyInfo} onClose={() => { setOpenSideMenu(false) }} />
+      <MobileNav open={openSideMenu} menu={NAV_MENU_STRUCTURE} products={products} infomenu={navItemCompanyInfo} onClose={() => { setOpenSideMenu(false) }} />
       <SideCart open={openSideCart} onClose={() => { setOpenSideCart(false) }} />
 
     </>

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

@@ -9,7 +9,9 @@ const getProductTypeMenuLabel = (productType = "") => {
   return productType.trim().toUpperCase() === "BEAUTY" ? "Essentials" : productType;
 };
 
-const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
+const normalizeTitle = (value = "") => value.trim().toUpperCase();
+
+const MobileNav = ({ open, onClose, menu = [], infomenu = [], products = [] }) => {
   const [expandedMenu, setExpandedMenu] = React.useState(null);
   const [expandedGroup, setExpandedGroup] = React.useState(null);
 
@@ -26,17 +28,49 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
     onClose();
   }
 
+  const findCollectionForMenuItem = (productType, item) => {
+    const targetTitles = (item?.titles || []).map(normalizeTitle);
+
+    return products
+      .filter((product) => product.productType === productType)
+      .flatMap((product) => product.collections || [])
+      .find((collection) => targetTitles.includes(normalizeTitle(collection?.title || "")));
+  }
+
+  const getMenuCollectionTitles = (productType) => {
+    const menuItem = menu.find((item) => item.productType === productType);
+
+    if (!menuItem) return [];
+
+    if (menuItem.groups) {
+      return menuItem.groups.flatMap((group) =>
+        group.children.flatMap((item) => item.titles || [])
+      );
+    }
+
+    return (menuItem.children || []).flatMap((item) => item.titles || []);
+  }
+
   const navigateToMenuItem = (productType, item = null) => {
     sessionStorage.setItem('amber-select-product-type', productType)
     sessionStorage.removeItem('amber-select-collection')
     sessionStorage.removeItem('amber-select-collections')
 
     if (item) {
+      const matchedCollection = findCollectionForMenuItem(productType, item);
+
       sessionStorage.setItem('amber-select-collection', JSON.stringify({
         title: item.label,
-        image: null
+        image: matchedCollection?.image || null
       }))
       sessionStorage.setItem('amber-select-collections', JSON.stringify(item.titles || []))
+    } else {
+      // Main menu click only shows collections that exist in the current mobile menu.
+      const menuCollectionTitles = getMenuCollectionTitles(productType);
+
+      if (menuCollectionTitles.length > 0) {
+        sessionStorage.setItem('amber-select-collections', JSON.stringify(menuCollectionTitles))
+      }
     }
 
     window.location.href = `/products`;
@@ -157,7 +191,6 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
           return (
             <Box key={menuLabel}>
               <Box
-                onClick={() => handleMenuToggle(menuLabel)}
                 sx={{
                   display: "flex",
                   alignItems: "center",
@@ -170,17 +203,20 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
               >
                 <Typography
                   variant="body1"
+                  onClick={() => navigateToMenuItem(productType)}
                   sx={{
                     color: "#4B2F34",
                     fontSize: "1.05rem",
                     letterSpacing: 0,
                     fontWeight: "400",
+                    cursor: "pointer",
                   }}
                 >
                   {menuLabel}
                 </Typography>
                 <Typography
                   component="span"
+                  onClick={() => handleMenuToggle(menuLabel)}
                   sx={{
                     color: "#4B2F34",
                     fontSize: "1.8rem",