Skip to content

improvement(ui): sidebar #3832

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 4 commits into from
Mar 28, 2026
Merged

improvement(ui): sidebar #3832

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
48c654d
improvement(ui): sidebar
emir-karabeg Mar 28, 2026
0872895
merge: resolve conflicts with staging for improvement/ui
waleedlatif1 Mar 28, 2026
dd76308
fix(sidebar): restore collapse button removed during conflict resolution
waleedlatif1 Mar 28, 2026
a8edee2
fix(sidebar): remove no-op gap-2 from single-child collapsed menu button
waleedlatif1 Mar 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
merge: resolve conflicts with staging for improvement/ui
  • Loading branch information
@waleedlatif1
waleedlatif1 committed Mar 28, 2026
commit 0872895422bebadda1f62cbba868e09b0086c6bd
150 changes: 76 additions & 74 deletions apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1193,82 +1193,84 @@ export const Sidebar = memo(function Sidebar() {

return (
<>
<aside
ref={sidebarRef}
className={cn(
'sidebar-container relative h-full overflow-hidden bg-[var(--surface-1)]',
isResizing && 'is-resizing'
)}
data-collapsed={isCollapsed || undefined}
aria-label='Workspace sidebar'
onClick={handleSidebarClick}
>
<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='flex h-[30px] items-center'>
<Tooltip.Root>
<Tooltip.Trigger asChild>
<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={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' />
) : (
<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' />
)}
</Link>
</Tooltip.Trigger>
{showCollapsedTooltips && (
<Tooltip.Content side='right'>
<p>Expand sidebar</p>
</Tooltip.Content>
)}
</Tooltip.Root>
<div className='relative h-full'>
<aside
ref={sidebarRef}
className={cn(
'sidebar-container relative h-full overflow-hidden bg-[var(--surface-1)]',
isResizing && 'is-resizing'
)}
data-collapsed={isCollapsed || undefined}
aria-label='Workspace sidebar'
onClick={handleSidebarClick}
>
<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='flex h-[30px] items-center'>
<Tooltip.Root>
<Tooltip.Trigger asChild>
<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={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' />
) : (
<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' />
)}
</Link>
Comment thread
waleedlatif1 marked this conversation as resolved.
</Tooltip.Trigger>
{showCollapsedTooltips && (
<Tooltip.Content side='right'>
<p>Expand sidebar</p>
</Tooltip.Content>
)}
</Tooltip.Root>
</div>
</div>

{/* Workspace Header */}
<div className='flex-shrink-0 pr-2.5 pl-[9px]'>
<WorkspaceHeader
activeWorkspace={activeWorkspace}
workspaceId={workspaceId}
workspaces={workspaces}
isWorkspacesLoading={isWorkspacesLoading}
isCreatingWorkspace={isCreatingWorkspace}
isWorkspaceMenuOpen={isWorkspaceMenuOpen}
setIsWorkspaceMenuOpen={setIsWorkspaceMenuOpen}
onWorkspaceSwitch={handleWorkspaceSwitch}
onCreateWorkspace={handleCreateWorkspace}
onRenameWorkspace={handleRenameWorkspace}
onDeleteWorkspace={handleDeleteWorkspace}
onDuplicateWorkspace={handleDuplicateWorkspace}
onExportWorkspace={exportWorkspace}
onImportWorkspace={handleImportWorkspace}
isImportingWorkspace={isImportingWorkspace}
onColorChange={handleColorChangeWorkspace}
onLeaveWorkspace={handleLeaveWorkspaceWrapper}
sessionUserId={sessionData?.user?.id}
isCollapsed={isCollapsed}
/>
</div>
{/* Workspace Header */}
<div className='flex-shrink-0 pr-2.5 pl-[9px]'>
<WorkspaceHeader
activeWorkspace={activeWorkspace}
workspaceId={workspaceId}
workspaces={workspaces}
isWorkspacesLoading={isWorkspacesLoading}
isCreatingWorkspace={isCreatingWorkspace}
isWorkspaceMenuOpen={isWorkspaceMenuOpen}
setIsWorkspaceMenuOpen={setIsWorkspaceMenuOpen}
onWorkspaceSwitch={handleWorkspaceSwitch}
onCreateWorkspace={handleCreateWorkspace}
onRenameWorkspace={handleRenameWorkspace}
onDeleteWorkspace={handleDeleteWorkspace}
onDuplicateWorkspace={handleDuplicateWorkspace}
onExportWorkspace={exportWorkspace}
onImportWorkspace={handleImportWorkspace}
isImportingWorkspace={isImportingWorkspace}
onColorChange={handleColorChangeWorkspace}
onLeaveWorkspace={handleLeaveWorkspaceWrapper}
sessionUserId={sessionData?.user?.id}
isCollapsed={isCollapsed}
/>
</div>

{isOnSettingsPage ? (
<SettingsSidebar
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/lib/auth/hybrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const BEARER_PREFIX = 'Bearer '
export function hasExternalApiCredentials(headers: Headers): boolean {
if (headers.has(API_KEY_HEADER)) return true
const auth = headers.get('authorization')
return auth?.startsWith(BEARER_PREFIX)
return auth?.startsWith(BEARER_PREFIX) ?? false
}

export interface AuthResult {
Expand Down
You are viewing a condensed version of this merge commit. You can view the full changes here.