improvement(sidebar): improved collapsed sidebar experience

update infisical icon
2026-04-06 03:00:16 -04:00 · 2026-03-21 08:11:52 -07:00 · 2026-03-20 07:35:16 -07:00
4 changed files with 69 additions and 2 deletions
--- a/apps/docs/components/icons.tsx
+++ b/apps/docs/components/icons.tsx
@@ -4143,11 +4143,12 @@ export function InfisicalIcon(props: SVGProps<SVGSVGElement>) {
    <svg {...props} viewBox='20 25 233 132' xmlns='http://www.w3.org/2000/svg'>
      <path
        d='m191.6 39.4c-20.3 0-37.15 13.21-52.9 30.61-12.99-16.4-29.8-30.61-51.06-30.61-27.74 0-50.44 23.86-50.44 51.33 0 26.68 21.43 51.8 48.98 51.8 20.55 0 37.07-13.86 51.32-31.81 12.69 16.97 29.1 31.41 53.2 31.41 27.13 0 49.85-22.96 49.85-51.4 0-27.12-20.44-51.33-48.95-51.33zm-104.3 77.94c-14.56 0-25.51-12.84-25.51-26.07 0-13.7 10.95-28.29 25.51-28.29 14.93 0 25.71 11.6 37.6 27.34-11.31 15.21-22.23 27.02-37.6 27.02zm104.4 0.25c-15 0-25.28-11.13-37.97-27.37 12.69-16.4 22.01-27.24 37.59-27.24 14.97 0 24.79 13.25 24.79 27.26 0 13-10.17 27.35-24.41 27.35z'
-        fill='currentColor'
+        fill='black'
      />
    </svg>
  )
 }
+
 export function IntercomIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -4,11 +4,13 @@ import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
+  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 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'
@@ -21,6 +23,8 @@ interface CollapsedSidebarMenuProps {
  ariaLabel?: string
  children: React.ReactNode
  className?: string
+  createLabel?: string
+  onCreateClick?: () => void
 }

 export function CollapsedSidebarMenu({
@@ -30,6 +34,8 @@ export function CollapsedSidebarMenu({
  ariaLabel,
  children,
  className,
+  createLabel,
+  onCreateClick,
 }: CollapsedSidebarMenuProps) {
  return (
    <div className={cn('flex flex-col px-[8px]', className)}>
@@ -54,6 +60,15 @@ export function CollapsedSidebarMenu({
          </DropdownMenuTrigger>
        </div>
        <DropdownMenuContent side='right' align='start' sideOffset={8} {...hover.contentProps}>
+          {createLabel && onCreateClick && (
+            <>
+              <DropdownMenuItem onSelect={onCreateClick}>
+                <Plus className='h-[14px] w-[14px]' />
+                <span>{createLabel}</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
          {children}
        </DropdownMenuContent>
      </DropdownMenu>
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -1109,6 +1109,52 @@ export const Sidebar = memo(function Sidebar() {
                </div>
              </div>

+              {/* Quick-create button (collapsed only) */}
+              {isCollapsed && showCollapsedContent && (
+                <div className='flex flex-shrink-0 flex-col px-[8px] pt-[8px]'>
+                  <DropdownMenu>
+                    <Tooltip.Root>
+                      <Tooltip.Trigger asChild>
+                        <DropdownMenuTrigger asChild>
+                          <button
+                            type='button'
+                            aria-label='Create new'
+                            className='mx-[2px] flex h-[30px] items-center justify-center rounded-[8px] px-[8px] hover:bg-[var(--surface-active)]'
+                          >
+                            <Plus className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                          </button>
+                        </DropdownMenuTrigger>
+                      </Tooltip.Trigger>
+                      <Tooltip.Content side='right'>
+                        <p>Create new</p>
+                      </Tooltip.Content>
+                    </Tooltip.Root>
+                    <DropdownMenuContent side='right' align='start' sideOffset={8}>
+                      <DropdownMenuItem
+                        onSelect={() => navigateToPage(`/workspace/${workspaceId}/home`)}
+                      >
+                        <Blimp className='h-[14px] w-[14px]' />
+                        <span>New task</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onSelect={handleCreateWorkflow}
+                        disabled={!canEdit || isCreatingWorkflow}
+                      >
+                        <div
+                          className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
+                          style={{
+                            backgroundColor: 'var(--text-icon)',
+                            borderColor: 'color-mix(in srgb, var(--text-icon) 60%, transparent)',
+                            backgroundClip: 'padding-box',
+                          }}
+                        />
+                        <span>{isCreatingWorkflow ? 'Creating...' : 'New workflow'}</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              )}
+
              {/* Scrollable Tasks + Workflows */}
              <div
                ref={isCollapsed ? undefined : scrollContainerRef}
@@ -1149,6 +1195,8 @@ export const Sidebar = memo(function Sidebar() {
                      onClick={() => navigateToPage(`/workspace/${workspaceId}/home`)}
                      ariaLabel='Tasks'
                      className='mt-[6px]'
+                      createLabel='New task'
+                      onCreateClick={() => navigateToPage(`/workspace/${workspaceId}/home`)}
                    >
                      {tasksLoading ? (
                        <DropdownMenuItem disabled>
@@ -1318,6 +1366,8 @@ export const Sidebar = memo(function Sidebar() {
                      onClick={handleCreateWorkflow}
                      ariaLabel='Workflows'
                      className='mt-[6px]'
+                      createLabel='New workflow'
+                      onCreateClick={canEdit ? handleCreateWorkflow : undefined}
                    >
                      {workflowsLoading && regularWorkflows.length === 0 ? (
                        <DropdownMenuItem disabled>
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -4143,11 +4143,12 @@ export function InfisicalIcon(props: SVGProps<SVGSVGElement>) {
    <svg {...props} viewBox='20 25 233 132' xmlns='http://www.w3.org/2000/svg'>
      <path
        d='m191.6 39.4c-20.3 0-37.15 13.21-52.9 30.61-12.99-16.4-29.8-30.61-51.06-30.61-27.74 0-50.44 23.86-50.44 51.33 0 26.68 21.43 51.8 48.98 51.8 20.55 0 37.07-13.86 51.32-31.81 12.69 16.97 29.1 31.41 53.2 31.41 27.13 0 49.85-22.96 49.85-51.4 0-27.12-20.44-51.33-48.95-51.33zm-104.3 77.94c-14.56 0-25.51-12.84-25.51-26.07 0-13.7 10.95-28.29 25.51-28.29 14.93 0 25.71 11.6 37.6 27.34-11.31 15.21-22.23 27.02-37.6 27.02zm104.4 0.25c-15 0-25.28-11.13-37.97-27.37 12.69-16.4 22.01-27.24 37.59-27.24 14.97 0 24.79 13.25 24.79 27.26 0 13-10.17 27.35-24.41 27.35z'
-        fill='currentColor'
+        fill='black'
      />
    </svg>
  )
 }
+
 export function IntercomIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
Author	SHA1	Message	Date
waleed	bee7f256a6	improvement(sidebar): improved collapsed sidebar experience	2026-03-21 08:11:52 -07:00
waleed	5a9306ebb1	update infisical icon	2026-03-20 07:35:16 -07:00