fix(core): limit category tree for parent navigation categories (#542)

bigcommerce · Feb 9, 2024 · f355bd4 · f355bd4
1 parent c8a2557
commit f355bd4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/apps/core/components/header/index.tsx b/apps/core/components/header/index.tsx
@@ -30,7 +30,10 @@ const HeaderNav = async ({
   className?: string;
   inCollapsedNav?: boolean;
 }) => {
-  const categoryTree = await getCategoryTree();
+  // To prevent the navigation menu from overflowing, we limit the number of categories to 6.
+  // To show a full list of categories, modify the `slice` method to remove the limit.
+  // Will require modification of navigation menu styles to accommodate the additional categories.
+  const categoryTree = (await getCategoryTree()).slice(0, 6);
 
   return (
     <>
@@ -92,19 +95,15 @@ const HeaderNav = async ({
           </NavigationMenuItem>
         ))}
       </NavigationMenuList>
-      <NavigationMenuList
-        className={cn(
-          'border-t border-gray-200 pt-6 lg:hidden',
-          !inCollapsedNav && 'hidden',
-          inCollapsedNav && 'flex-col items-start',
-        )}
-      >
-        <NavigationMenuItem className={cn(inCollapsedNav && 'w-full')}>
-          <NavigationMenuLink href="/login">
-            Your Account <User />
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-      </NavigationMenuList>
+      {inCollapsedNav && (
+        <NavigationMenuList className="flex-col items-start border-t border-gray-200 pt-6 lg:hidden">
+          <NavigationMenuItem className="w-full">
+            <NavigationMenuLink href="/login">
+              Your Account <User />
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      )}
     </>
   );
 };

diff --git a/packages/components/src/components/navigation-menu/navigation-menu.tsx b/packages/components/src/components/navigation-menu/navigation-menu.tsx
@@ -51,7 +51,7 @@ const NavigationMenu = forwardRef<
           <div className="relative">
             <div
               className={cn(
-                'group flex min-h-[92px] items-center justify-between gap-6 bg-white px-6 2xl:container sm:px-10 lg:gap-8 lg:px-12 2xl:mx-auto 2xl:px-0',
+                'group flex min-h-[92px] items-center justify-between gap-6 overflow-hidden bg-white px-6 2xl:container sm:px-10 lg:gap-8 lg:px-12 2xl:mx-auto 2xl:px-0',
                 className,
               )}
               {...props}