From ff48f7aa9855c01743dddf5afb4675fdd04bec4b Mon Sep 17 00:00:00 2001
From: Kamruzzaman <kzamanbn@gmail.com>
Date: Fri, 27 Mar 2026 12:29:39 +0600
Subject: [PATCH 1/2] fix: resolve sidebar collapse/expand toggle not working
 after first interaction

Replace Base-UI Collapsible with state-driven conditional rendering in
LayoutMenu. The Collapsible.Trigger render prop chain through
SidebarMenuButton's Tooltip wrapper broke event handling and animation
state tracking after the first expand cycle.

- Use handleClick + setOpen for direct toggle control
- Conditionally render SidebarMenuSub with {open && ...}
- Preserve accessibility via aria-expanded and aria-controls with useId
- Remove @base-ui/react/collapsible dependency from layout-menu

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/wordpress/layout-menu.tsx | 153 +++++++++++------------
 1 file changed, 72 insertions(+), 81 deletions(-)

diff --git a/src/components/wordpress/layout-menu.tsx b/src/components/wordpress/layout-menu.tsx
index ecf61c3..d202703 100644
--- a/src/components/wordpress/layout-menu.tsx
+++ b/src/components/wordpress/layout-menu.tsx
@@ -4,6 +4,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useState,
   type HTMLAttributes,
@@ -24,7 +25,6 @@ import {
   SidebarProvider,
   useSidebarOptional,
 } from "../ui/sidebar";
-import { Collapsible } from "@base-ui/react/collapsible";
 
 /* ============================================
    Sidebar provider detection
@@ -369,6 +369,7 @@ function MenuItemRenderer({
     [item, activeItemId]
   );
   const [open, setOpen] = useState(containsActive);
+  const submenuId = useId();
 
   // Auto-expand when a descendant becomes active
   useEffect(() => {
@@ -441,52 +442,46 @@ function MenuItemRenderer({
   // Parent item with children at depth 0
   if (hasChildren && depth === 0) {
     return (
-      <Collapsible.Root open={open} onOpenChange={setOpen}>
-        <SidebarMenuItem data-testid={item.testId}>
-          <Collapsible.Trigger
-            render={
-              <SidebarMenuButton
-                tooltip={item.label}
-                isActive={isActive}
-                onClick={() => onItemClick?.(item)}
+      <SidebarMenuItem data-testid={item.testId}>
+        <SidebarMenuButton
+          tooltip={item.label}
+          isActive={isActive}
+          onClick={handleClick}
+          className={cn(
+            menuItemClassName,
+            isActive && activeItemClassName,
+            item.className,
+          )}
+          data-active={isActive || undefined}
+          disabled={item.disabled}
+          aria-expanded={open}
+          aria-controls={submenuId}
+        >
+          {item.icon && (
+            <span className="flex shrink-0 [&_svg]:size-4">{item.icon}</span>
+          )}
+          <span className="min-w-0 flex-1">
+            <span className="block truncate">{item.label}</span>
+            {item.secondaryLabel && (
+              <span
                 className={cn(
-                  menuItemClassName,
-                  isActive && activeItemClassName,
-                  item.className,
+                  "block truncate text-xs",
+                  isActive ? "opacity-90" : "text-muted-foreground"
                 )}
-                data-active={isActive || undefined}
-                disabled={item.disabled}
-              />
-            }
-          >
-            {item.icon && (
-              <span className="flex shrink-0 [&_svg]:size-4">{item.icon}</span>
+              >
+                {item.secondaryLabel}
+              </span>
             )}
-            <span className="min-w-0 flex-1">
-              <span className="block truncate">{item.label}</span>
-              {item.secondaryLabel && (
-                <span
-                  className={cn(
-                    "block truncate text-xs",
-                    isActive ? "opacity-90" : "text-muted-foreground"
-                  )}
-                >
-                  {item.secondaryLabel}
-                </span>
-              )}
-            </span>
-            <ChevronRight
-              className={cn(
-                "ml-auto size-4 shrink-0 transition-transform duration-200",
-                open && "rotate-90"
-              )}
-            />
-          </Collapsible.Trigger>
-          <Collapsible.Panel
-            render={
-              <SidebarMenuSub />
-            }
-          >
+          </span>
+          <ChevronRight
+            className={cn(
+              "ml-auto size-4 shrink-0 transition-transform duration-200",
+              open && "rotate-90"
+            )}
+          />
+        </SidebarMenuButton>
+        {open && (
+          <SidebarMenuSub id={submenuId}>
             {item.children!.map((child) => (
               <SubMenuItemRenderer
                 key={child.id}
@@ -499,9 +494,9 @@ function MenuItemRenderer({
                 renderItem={renderItem}
               />
             ))}
-          </Collapsible.Panel>
-        </SidebarMenuItem>
-      </Collapsible.Root>
+          </SidebarMenuSub>
+        )}
+      </SidebarMenuItem>
     );
   }
 
@@ -529,6 +524,7 @@ function SubMenuItemRenderer({
     [item, activeItemId]
   );
   const [open, setOpen] = useState(containsActive);
+  const submenuId = useId();
 
   useEffect(() => {
     if (containsActive) setOpen(true);
@@ -582,38 +578,33 @@ function SubMenuItemRenderer({
 
   // Nested parent sub-item
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen}>
-      <SidebarMenuSubItem data-testid={item.testId}>
-        <Collapsible.Trigger
-          render={
-            <SidebarMenuSubButton
-              isActive={isActive}
-              onClick={() => onItemClick?.(item)}
-              className={cn(
-                menuItemClassName,
-                isActive && activeItemClassName,
-                item.className,
-              )}
-              data-active={isActive || undefined}
-            />
-          }
-        >
-          {item.icon && (
-            <span className="flex shrink-0 [&_svg]:size-4">{item.icon}</span>
+    <SidebarMenuSubItem data-testid={item.testId}>
+      <SidebarMenuSubButton
+        render={<button type="button" />}
+        isActive={isActive}
+        onClick={handleClick}
+        className={cn(
+          menuItemClassName,
+          isActive && activeItemClassName,
+          item.className,
+        )}
+        data-active={isActive || undefined}
+        aria-expanded={open}
+        aria-controls={submenuId}
+      >
+        {item.icon && (
+          <span className="flex shrink-0 [&_svg]:size-4">{item.icon}</span>
+        )}
+        <span className="min-w-0 flex-1 truncate">{item.label}</span>
+        <ChevronRight
+          className={cn(
+            "ml-auto size-4 shrink-0 transition-transform duration-200",
+            open && "rotate-90"
           )}
-          <span className="min-w-0 flex-1 truncate">{item.label}</span>
-          <ChevronRight
-            className={cn(
-              "ml-auto size-4 shrink-0 transition-transform duration-200",
-              open && "rotate-90"
-            )}
-          />
-        </Collapsible.Trigger>
-        <Collapsible.Panel
-          render={
-            <SidebarMenuSub />
-          }
-        >
+        />
+      </SidebarMenuSubButton>
+      {open && (
+        <SidebarMenuSub id={submenuId}>
           {item.children!.map((child) => (
             <SubMenuItemRenderer
               key={child.id}
@@ -626,8 +617,8 @@ function SubMenuItemRenderer({
               renderItem={renderItem}
             />
           ))}
-        </Collapsible.Panel>
-      </SidebarMenuSubItem>
-    </Collapsible.Root>
+        </SidebarMenuSub>
+      )}
+    </SidebarMenuSubItem>
   );
 }

From 5d1e9107f0e48456400ecea48277b85c84605477 Mon Sep 17 00:00:00 2001
From: Kamruzzaman <kzamanbn@gmail.com>
Date: Wed, 1 Apr 2026 14:24:20 +0600
Subject: [PATCH 2/2] Update layout-menu.tsx

---
 src/components/wordpress/layout-menu.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/wordpress/layout-menu.tsx b/src/components/wordpress/layout-menu.tsx
index d202703..8a45560 100644
--- a/src/components/wordpress/layout-menu.tsx
+++ b/src/components/wordpress/layout-menu.tsx
@@ -379,9 +379,8 @@ function MenuItemRenderer({
   const handleClick = useCallback(() => {
     if (hasChildren) {
       setOpen((o) => !o);
-    } else {
-      item.onClick?.();
     }
+    item.onClick?.();
     onItemClick?.(item);
   }, [hasChildren, item, onItemClick]);
 
@@ -444,6 +443,7 @@ function MenuItemRenderer({
     return (
       <SidebarMenuItem data-testid={item.testId}>
         <SidebarMenuButton
+          render={item.href ? <a href={item.href} /> : undefined}
           tooltip={item.label}
           isActive={isActive}
           onClick={handleClick}
@@ -533,9 +533,8 @@ function SubMenuItemRenderer({
   const handleClick = useCallback(() => {
     if (hasChildren) {
       setOpen((o) => !o);
-    } else {
-      item.onClick?.();
     }
+    item.onClick?.();
     onItemClick?.(item);
   }, [hasChildren, item, onItemClick]);
 
@@ -580,7 +579,11 @@ function SubMenuItemRenderer({
   return (
     <SidebarMenuSubItem data-testid={item.testId}>
       <SidebarMenuSubButton
-        render={<button type="button" />}
+        render={
+          item.href
+            ? <a href={item.href} />
+            : <button type="button" disabled={item.disabled} />
+        }
         isActive={isActive}
         onClick={handleClick}
         className={cn(
@@ -589,6 +592,7 @@ function SubMenuItemRenderer({
           item.className,
         )}
         data-active={isActive || undefined}
+        aria-disabled={item.disabled || undefined}
         aria-expanded={open}
         aria-controls={submenuId}
       >