From 74e93b3079c4d4926b52c9ac8469cea25dc3a8cf Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Tue, 6 May 2025 19:11:15 +0300
Subject: [PATCH] docs: fixes to navbar and sidebar in mobile (#12379)

* docs: fixes to navbar and sidebar in mobile

* fix height issues
---
 .../MainNav/MobileMenu/SubMenu/index.tsx       |  4 ++--
 .../components/MainNav/MobileMenu/index.tsx    |  5 ++++-
 .../components/Sidebar/Item/Category/index.tsx | 18 ++++++++----------
 .../src/hooks/use-click-outside/index.tsx      |  3 ++-
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx
index 150e19b399..74db4354d8 100644
--- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx
@@ -24,11 +24,11 @@ export const MainNavMobileSubMenu = ({
     ) as (MenuItemLink | MenuItemSubMenu)[]
   }, [menu])
   return (
-    <div className="flex flex-col gap-[23px]">
+    <div className="flex flex-col gap-[23px] max-h-[90%]">
       <span className="text-compact-small-plus text-medusa-fg-muted uppercase">
         {title}
       </span>
-      <ul className="flex flex-col gap-[18px]">
+      <ul className="flex flex-col gap-[18px] max-h-full overflow-auto">
         {filteredItems.map((item, index) => (
           <li
             key={index}
diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx
index 05e88925b0..da56ae73e5 100644
--- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx
@@ -52,7 +52,10 @@ export const MainNavMobileMenu = () => {
             nodeRef={ref}
             timeout={250}
           >
-            <div ref={ref} className="w-full px-docs_1.5">
+            <div
+              ref={ref}
+              className="w-full px-docs_1.5 h-3/4 flex flex-col justify-center"
+            >
               {selectedMenus.length === 0 && (
                 <MainNavMobileMainMenu setSelectedMenus={setSelectedMenus} />
               )}
diff --git a/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx
index d4192796a1..bd3f990464 100644
--- a/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx
@@ -64,7 +64,13 @@ export const SidebarItemCategory = ({
   }, [persistCategoryState])
 
   const handleOpen = () => {
-    item.onOpen?.()
+    if (!open) {
+      item.onOpen?.()
+    }
+    if (persistCategoryState) {
+      updatePersistedCategoryState(item.title, !open)
+    }
+    setOpen((prev) => !prev)
   }
 
   const isTitleOneWord = useMemo(
@@ -87,15 +93,7 @@ export const SidebarItemCategory = ({
             !isTitleOneWord && "break-words"
           )}
           tabIndex={-1}
-          onClick={() => {
-            if (!open) {
-              handleOpen()
-            }
-            if (persistCategoryState) {
-              updatePersistedCategoryState(item.title, !open)
-            }
-            setOpen((prev) => !prev)
-          }}
+          onClick={handleOpen}
         >
           <span
             className={clsx(
diff --git a/www/packages/docs-ui/src/hooks/use-click-outside/index.tsx b/www/packages/docs-ui/src/hooks/use-click-outside/index.tsx
index 54abf469c4..cb1e6c2e75 100644
--- a/www/packages/docs-ui/src/hooks/use-click-outside/index.tsx
+++ b/www/packages/docs-ui/src/hooks/use-click-outside/index.tsx
@@ -16,7 +16,8 @@ export const useClickOutside = ({
 
   const checkClickOutside = useCallback(
     (e: MouseEvent) => {
-      if (!elmRef.current?.contains(e.target as Node)) {
+      const node = e.target as Node
+      if (!elmRef.current?.contains(node) && node.isConnected) {
         onClickOutside(e)
       }
     },