feat module 1,2,4 : change to dynamic navigation menu based on shopify collection - navbar

src/components/Navbar/Navbar.jsx

@@ -29,7 +29,11 @@ import { Scrollbar, A11y, Navigation } from 'swiper/modules';
 
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import { NAV_MENU_STRUCTURE as SHARED_NAV_MENU_STRUCTURE } from "../../config/menuCollections";
+import {
+  NAV_MENU_STRUCTURE as SHARED_NAV_MENU_STRUCTURE,
+  buildNavMenuFromProducts,
+  normalizeTitle,
+} from "../../config/menuCollections";
 
 function calculateTotalQuantity(cartItems) {
   return cartItems.reduce((total, item) => total + item.quantity, 0);
@@ -84,8 +88,6 @@ const COLLECTION_PRIORITY_BY_TYPE = {
   ],
 };
 
-const normalizeTitle = (value = "") => value.trim().toUpperCase();
-
 const getProductTypeMenuLabel = (productType = "") => {
   return normalizeTitle(productType) === "BEAUTY" ? "Essentials" : productType;
 };
@@ -192,6 +194,9 @@ const Navbar = () => {
   const [activeMenu, setActiveMenu] = useState(null);
   const [activeGroup, setActiveGroup] = useState(null);
   const [dropdownTopOffset, setDropdownTopOffset] = useState(52);
+  const dynamicNavMenu = products?.length > 0
+    ? buildNavMenuFromProducts(products)
+    : NAV_MENU_STRUCTURE;
 
   const [displayCollection, setDisplayCollection] = useState({
     productType: null,
@@ -394,15 +399,19 @@ const Navbar = () => {
 
   const findCollectionForMenuItem = (productType, item) => {
     const targetTitles = (item?.titles || []).map(normalizeTitle);
+    const targetHandles = (item?.handles || []).map(normalizeTitle);
 
     return products
       .filter((product) => product.productType === productType)
       .flatMap((product) => product.collections || [])
-      .find((collection) => targetTitles.includes(normalizeTitle(collection?.title || "")));
+      .find((collection) =>
+        targetTitles.includes(normalizeTitle(collection?.title || "")) ||
+        targetHandles.includes(normalizeTitle(collection?.handle || ""))
+      );
   }
 
   const getMenuCollectionTitles = (productType) => {
-    const menu = NAV_MENU_STRUCTURE.find((menuItem) => menuItem.productType === productType);
+    const menu = dynamicNavMenu.find((menuItem) => menuItem.productType === productType);
 
     if (!menu) return [];
 
@@ -545,7 +554,8 @@ const Navbar = () => {
               }}
             >
 
-              {NAV_MENU_STRUCTURE.map((menu) => (
+              {/* Navigation Menu Items */}
+              {dynamicNavMenu.map((menu) => (
                 <Box
                   key={menu.label}
                   ref={(node) => {
@@ -984,7 +994,7 @@ const Navbar = () => {
       </AppBar>
       {showSearch && <SearchProduct onClose={() => { setShowSearch(false) }} />}
 
-      <MobileNav open={openSideMenu} menu={NAV_MENU_STRUCTURE} products={products} infomenu={navItemCompanyInfo} onClose={() => { setOpenSideMenu(false) }} />
+      <MobileNav open={openSideMenu} menu={dynamicNavMenu} products={products} infomenu={navItemCompanyInfo} onClose={() => { setOpenSideMenu(false) }} />
       <SideCart open={openSideCart} onClose={() => { setOpenSideCart(false) }} />
 
     </>