From f355bd4522e9e159839600b8cbc0c12777ac9dcc Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Fri, 9 Feb 2024 15:39:31 -0600
Subject: [PATCH] fix(core): limit category tree for parent navigation
 categories (#542)

---
 apps/core/components/header/index.tsx         | 27 +++++++++----------
 .../navigation-menu/navigation-menu.tsx       |  2 +-
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/apps/core/components/header/index.tsx b/apps/core/components/header/index.tsx
index d249217bdc..eab82d62e3 100644
--- 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
index 79aae4944d..1b55205b0f 100644
--- 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}