fix(sidebar): collapsed sidebar shows single icons with hover dropdown menus (#3588)

* fix(sidebar): collapsed sidebar shows single icons with hover dropdown menus

* fix(sidebar): truncate long names in collapsed dropdown menus

* fix(sidebar): address PR review — extract components, fix reactive subscription

* fix(sidebar): support touch/keyboard for collapsed menus, document auto-collapse

* fix(sidebar): remove dead CSS selector for sidebar-collapse-remove

* fix(sidebar): add aria-label to collapsed menu trigger buttons

* fix(sidebar): use useLayoutEffect for attribute removal, remove dead branch

Author: waleedlatif1

apps/sim/app/_styles/globals.css

@@ -33,11 +33,26 @@
   opacity: 0;
 }
 
+html[data-sidebar-collapsed] .sidebar-container span,
+html[data-sidebar-collapsed] .sidebar-container .text-small {
+  opacity: 0;
+}
+
 .sidebar-container .sidebar-collapse-hide {
   transition: opacity 60ms ease;
 }
 
-.sidebar-container[data-collapsed] .sidebar-collapse-hide {
+.sidebar-container[data-collapsed] .sidebar-collapse-hide,
+html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-hide {
+  opacity: 0;
+}
+
+html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-remove {
+  display: none;
+}
+
+html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
+  width: 0;
   opacity: 0;
 }
 

apps/sim/app/layout.tsx

@@ -114,6 +114,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
                     if (isCollapsed) {
                       document.documentElement.style.setProperty('--sidebar-width', '51px');
+                      document.documentElement.setAttribute('data-sidebar-collapsed', '');
                     } else {
                       var width = state && state.sidebarWidth;
                       var maxSidebarWidth = window.innerWidth * 0.3;

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -16,6 +16,7 @@ import {
 import { persistImportedWorkflow } from '@/lib/workflows/operations/import-export'
 import { useChatHistory, useMarkTaskRead } from '@/hooks/queries/tasks'
 import type { ChatContext } from '@/stores/panel'
+import { useSidebarStore } from '@/stores/sidebar/store'
 import {
   MessageContent,
   MothershipView,
@@ -166,6 +167,9 @@ export function Home({ chatId }: HomeProps = {}) {
 
   const handleResourceEvent = useCallback(() => {
     if (isResourceCollapsedRef.current) {
+      /** Auto-collapse sidebar to give resource panel maximum width for immersive experience */
+      const { isCollapsed, toggleCollapsed } = useSidebarStore.getState()
+      if (!isCollapsed) toggleCollapsed()
       setIsResourceCollapsed(false)
       setIsResourceAnimatingIn(true)
     }

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx

@@ -0,0 +1,121 @@
+import { Folder } from 'lucide-react'
+import Link from 'next/link'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import type { FolderTreeNode } from '@/stores/folders/types'
+import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
+
+interface CollapsedSidebarMenuProps {
+  icon: React.ReactNode
+  hover: ReturnType<typeof useHoverMenu>
+  onClick?: () => void
+  ariaLabel?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function CollapsedSidebarMenu({
+  icon,
+  hover,
+  onClick,
+  ariaLabel,
+  children,
+  className,
+}: CollapsedSidebarMenuProps) {
+  return (
+    <div className={cn('flex flex-col px-[8px]', className)}>
+      <DropdownMenu
+        open={hover.isOpen}
+        onOpenChange={(open) => {
+          if (open) hover.open()
+          else hover.close()
+        }}
+        modal={false}
+      >
+        <div {...hover.triggerProps}>
+          <DropdownMenuTrigger asChild>
+            <button
+              type='button'
+              aria-label={ariaLabel}
+              className='mx-[2px] flex h-[30px] items-center rounded-[8px] px-[8px] hover:bg-[var(--surface-active)]'
+              onClick={onClick}
+            >
+              {icon}
+            </button>
+          </DropdownMenuTrigger>
+        </div>
+        <DropdownMenuContent side='right' align='start' sideOffset={8} {...hover.contentProps}>
+          {children}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+export function CollapsedFolderItems({
+  nodes,
+  workflowsByFolder,
+  workspaceId,
+}: {
+  nodes: FolderTreeNode[]
+  workflowsByFolder: Record<string, WorkflowMetadata[]>
+  workspaceId: string
+}) {
+  return (
+    <>
+      {nodes.map((folder) => {
+        const folderWorkflows = workflowsByFolder[folder.id] || []
+        const hasChildren = folder.children.length > 0 || folderWorkflows.length > 0
+
+        if (!hasChildren) {
+          return (
+            <DropdownMenuItem key={folder.id} disabled>
+              <Folder className='h-[14px] w-[14px]' />
+              <span className='truncate'>{folder.name}</span>
+            </DropdownMenuItem>
+          )
+        }
+
+        return (
+          <DropdownMenuSub key={folder.id}>
+            <DropdownMenuSubTrigger>
+              <Folder className='h-[14px] w-[14px]' />
+              <span className='truncate'>{folder.name}</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <CollapsedFolderItems
+                nodes={folder.children}
+                workflowsByFolder={workflowsByFolder}
+                workspaceId={workspaceId}
+              />
+              {folderWorkflows.map((workflow) => (
+                <DropdownMenuItem key={workflow.id} asChild>
+                  <Link href={`/workspace/${workspaceId}/w/${workflow.id}`}>
+                    <div
+                      className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
+                      style={{
+                        backgroundColor: workflow.color,
+                        borderColor: `${workflow.color}60`,
+                        backgroundClip: 'padding-box',
+                      }}
+                    />
+                    <span className='truncate'>{workflow.name}</span>
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )
+      })}
+    </>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts

@@ -1,3 +1,7 @@
+export {
+  CollapsedFolderItems,
+  CollapsedSidebarMenu,
+} from './collapsed-sidebar-menu/collapsed-sidebar-menu'
 export { HelpModal } from './help-modal/help-modal'
 export { NavItemContextMenu } from './nav-item-context-menu'
 export { SearchModal } from './search-modal/search-modal'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx

@@ -13,6 +13,10 @@ import {
   useSidebarDragContextValue,
   useWorkflowSelection,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import {
+  compareByOrder,
+  groupWorkflowsByFolder,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import { useFolders } from '@/hooks/queries/folders'
 import { useFolderStore } from '@/stores/folders/store'
 import type { FolderTreeNode } from '@/stores/folders/types'
@@ -22,17 +26,6 @@ const TREE_SPACING = {
   INDENT_PER_LEVEL: 20,
 } as const
 
-function compareByOrder<T extends { sortOrder: number; createdAt?: Date; id: string }>(
-  a: T,
-  b: T
-): number {
-  if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder
-  const timeA = a.createdAt?.getTime() ?? 0
-  const timeB = b.createdAt?.getTime() ?? 0
-  if (timeA !== timeB) return timeA - timeB
-  return a.id.localeCompare(b.id)
-}
-
 interface WorkflowListProps {
   workspaceId: string
   workflowId: string | undefined
@@ -129,21 +122,10 @@ export const WorkflowList = memo(function WorkflowList({
     return activeWorkflow?.folderId || null
   }, [workflowId, regularWorkflows, isLoading, foldersLoading])
 
-  const workflowsByFolder = useMemo(() => {
-    const grouped = regularWorkflows.reduce(
-      (acc, workflow) => {
-        const folderId = workflow.folderId || 'root'
-        if (!acc[folderId]) acc[folderId] = []
-        acc[folderId].push(workflow)
-        return acc
-      },
-      {} as Record<string, WorkflowMetadata[]>
-    )
-    for (const folderId of Object.keys(grouped)) {
-      grouped[folderId].sort(compareByOrder)
-    }
-    return grouped
-  }, [regularWorkflows])
+  const workflowsByFolder = useMemo(
+    () => groupWorkflowsByFolder(regularWorkflows),
+    [regularWorkflows]
+  )
 
   const orderedWorkflowIds = useMemo(() => {
     const ids: string[] = []

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts

@@ -4,6 +4,7 @@ export { type DropIndicator, useDragDrop } from './use-drag-drop'
 export { useFolderExpand } from './use-folder-expand'
 export { useFolderOperations } from './use-folder-operations'
 export { useFolderSelection } from './use-folder-selection'
+export { useHoverMenu } from './use-hover-menu'
 export { useItemDrag } from './use-item-drag'
 export { useItemRename } from './use-item-rename'
 export {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+const CLOSE_DELAY_MS = 150
+
+const preventAutoFocus = (e: Event) => e.preventDefault()
+
+/**
+ * Manages hover-triggered dropdown menu state.
+ * Provides handlers for trigger and content mouse events with a delay
+ * to prevent flickering when moving between trigger and content.
+ */
+export function useHoverMenu() {
+  const [isOpen, setIsOpen] = useState(false)
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const cancelClose = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current)
+      }
+    }
+  }, [])
+
+  const scheduleClose = useCallback(() => {
+    cancelClose()
+    closeTimerRef.current = setTimeout(() => setIsOpen(false), CLOSE_DELAY_MS)
+  }, [cancelClose])
+
+  const open = useCallback(() => {
+    cancelClose()
+    setIsOpen(true)
+  }, [cancelClose])
+
+  const close = useCallback(() => {
+    cancelClose()
+    setIsOpen(false)
+  }, [cancelClose])
+
+  const triggerProps = useMemo(
+    () => ({ onMouseEnter: open, onMouseLeave: scheduleClose }) as const,
+    [open, scheduleClose]
+  )
+
+  const contentProps = useMemo(
+    () =>
+      ({
+        onMouseEnter: cancelClose,
+        onMouseLeave: scheduleClose,
+        onCloseAutoFocus: preventAutoFocus,
+      }) as const,
+    [cancelClose, scheduleClose]
+  )
+
+  return { isOpen, open, close, triggerProps, contentProps }
+}