improvement(ui): sidebar (#3832)

Author: waleedlatif1

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

@@ -128,7 +128,7 @@ function TaskStatusIcon({
 function WorkflowColorSwatch({ color }: { color: string }) {
   return (
     <div
-      className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
+      className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
       style={{
         backgroundColor: color,
         borderColor: `${color}60`,
@@ -161,7 +161,7 @@ export function CollapsedSidebarMenu({
             <button
               type='button'
               aria-label={ariaLabel}
-              className='mx-0.5 flex h-[30px] items-center rounded-[8px] px-2 hover-hover:bg-[var(--surface-hover)]'
+              className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 hover-hover:bg-[var(--surface-hover)]'
             >
               {icon}
             </button>

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

@@ -210,7 +210,7 @@ export function SettingsSidebar({
       {/* Settings sections */}
       <div
         className={cn(
-          'mt-3.5 flex flex-1 flex-col gap-3.5',
+          'mt-3.5 flex flex-1 flex-col gap-3.5 pb-2',
           !isCollapsed && 'overflow-y-auto overflow-x-hidden'
         )}
       >

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

@@ -343,7 +343,7 @@ export function WorkspaceHeader({
                 type='button'
                 aria-label='Switch workspace'
                 className={cn(
-                  'group flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-1.5 transition-colors hover-hover:bg-[var(--surface-5)]',
+                  'group flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-[5px] transition-colors hover-hover:bg-[var(--surface-5)]',
                   isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-2 pr-2'
                 )}
                 title={activeWorkspace?.name || 'Loading...'}

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

@@ -102,8 +102,9 @@ const logger = createLogger('Sidebar')
 
 function SidebarItemSkeleton() {
   return (
-    <div className='sidebar-collapse-hide mx-0.5 flex h-[30px] items-center px-2'>
-      <Skeleton className='h-[24px] w-full rounded-sm' />
+    <div className='sidebar-collapse-hide mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2'>
+      <Skeleton className='h-[16px] w-[16px] flex-shrink-0 rounded-sm' />
+      <Skeleton className='h-[14px] w-full rounded-sm' />
     </div>
   )
 }
@@ -1030,7 +1031,7 @@ export const Sidebar = memo(function Sidebar() {
   const workflowsCollapsedIcon = useMemo(
     () => (
       <div
-        className='h-[16px] w-[16px] flex-shrink-0 rounded-[3px] border-[2px]'
+        className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
         style={workflowIconStyle}
       />
     ),
@@ -1056,6 +1057,14 @@ export const Sidebar = memo(function Sidebar() {
   // Stable no-op for collapsed workflow context menu delete (never changes)
   const noop = useCallback(() => {}, [])
 
+  const handleExpandSidebar = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      toggleCollapsed()
+    },
+    [toggleCollapsed]
+  )
+
   // Stable callback for the "New task" button in expanded mode
   const handleNewTask = useCallback(
     () => navigateToPage(`/workspace/${workspaceId}/home`),
@@ -1198,51 +1207,38 @@ export const Sidebar = memo(function Sidebar() {
           <div className='flex h-full flex-col pt-3'>
             {/* Top bar: Logo + Collapse toggle */}
             <div className='flex flex-shrink-0 items-center pr-2 pb-2 pl-2.5'>
-              <div className='relative flex h-[30px] items-center'>
-                <Link
-                  href={`/workspace/${workspaceId}/home`}
-                  className='sidebar-collapse-hide sidebar-collapse-remove flex h-[30px] items-center rounded-[8px] px-1.5 hover-hover:bg-[var(--surface-hover)]'
-                  tabIndex={isCollapsed ? -1 : 0}
-                >
-                  {brand.logoUrl ? (
-                    <Image
-                      src={brand.logoUrl}
-                      alt={brand.name}
-                      width={16}
-                      height={16}
-                      className='h-[16px] w-[16px] object-contain'
-                      unoptimized
-                    />
-                  ) : (
-                    <Wordmark className='h-[16px] w-auto text-[var(--text-body)]' />
-                  )}
-                </Link>
-
+              <div className='flex h-[30px] items-center'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <button
-                      type='button'
-                      onClick={toggleCollapsed}
-                      className='sidebar-collapse-show group absolute left-0 flex h-[30px] w-[30px] items-center justify-center rounded-[8px] hover-hover:bg-[var(--surface-hover)]'
-                      aria-label='Expand sidebar'
-                      tabIndex={isCollapsed ? 0 : -1}
+                    <Link
+                      href={`/workspace/${workspaceId}/home`}
+                      onClick={isCollapsed ? handleExpandSidebar : undefined}
+                      className='group flex h-[30px] items-center rounded-[8px] px-1.5 hover-hover:bg-[var(--surface-hover)]'
+                      aria-label={isCollapsed ? 'Expand sidebar' : brand.name}
                     >
                       {brand.logoUrl ? (
                         <Image
                           src={brand.logoUrl}
                           alt={brand.name}
                           width={16}
                           height={16}
-                          className='h-[16px] w-[16px] object-contain group-hover:hidden'
+                          className={cn(
+                            'h-[16px] w-[16px] flex-shrink-0 object-contain',
+                            isCollapsed && 'group-hover:hidden'
+                          )}
                           unoptimized
                         />
+                      ) : isCollapsed ? (
+                        <Sim className='h-[16px] w-[16px] flex-shrink-0 group-hover:hidden' />
                       ) : (
-                        <Sim className='h-[16px] w-[16px] text-[var(--text-icon)] group-hover:hidden' />
+                        <Wordmark className='h-[16px] w-auto text-[var(--text-body)]' />
+                      )}
+                      {isCollapsed && (
+                        <PanelLeft className='hidden h-[16px] w-[16px] flex-shrink-0 rotate-180 text-[var(--text-icon)] group-hover:block' />
                       )}
-                      <PanelLeft className='hidden h-[16px] w-[16px] rotate-180 text-[var(--text-icon)] group-hover:block' />
-                    </button>
+                    </Link>
                   </Tooltip.Trigger>
-                  {isCollapsed && (
+                  {showCollapsedTooltips && (
                     <Tooltip.Content side='right'>
                       <p>Expand sidebar</p>
                     </Tooltip.Content>
@@ -1272,7 +1268,7 @@ export const Sidebar = memo(function Sidebar() {
             </div>
 
             {/* Workspace Header */}
-            <div className='flex-shrink-0 px-2.5'>
+            <div className='flex-shrink-0 pr-2.5 pl-[9px]'>
               <WorkspaceHeader
                 activeWorkspace={activeWorkspace}
                 workspaceId={workspaceId}