docs: fixes to navbar and sidebar in mobile (#12379)

* docs: fixes to navbar and sidebar in mobile

* fix height issues

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}

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} />
               )}

www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx

@@ -64,8 +64,14 @@ export const SidebarItemCategory = ({
   }, [persistCategoryState])
 
   const handleOpen = () => {
+    if (!open) {
       item.onOpen?.()
     }
+    if (persistCategoryState) {
+      updatePersistedCategoryState(item.title, !open)
+    }
+    setOpen((prev) => !prev)
+  }
 
   const isTitleOneWord = useMemo(
     () => item.title.split(" ").length === 1,
@@ -87,15 +93,7 @@ export const SidebarItemCategory = ({
             !isTitleOneWord && "break-words"
           )}
           tabIndex={-1}
-          onClick={() => {
+          onClick={handleOpen}
-            if (!open) {
-              handleOpen()
-            }
-            if (persistCategoryState) {
-              updatePersistedCategoryState(item.title, !open)
-            }
-            setOpen((prev) => !prev)
-          }}
         >
           <span
             className={clsx(

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)
       }
     },