chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: collapsed sidebar layout scaling and toggle button size

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 19:21:22 -05:00
parent 58a55f4d88
commit c47484c4cf
1 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/layout/Sidebar.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
import { CategoryList } from '@/components/sidebar/CategoryList'
import { TagCloud } from '@/components/sidebar/TagCloud'
@@ -115,13 +116,13 @@ export function Sidebar() {
{sidebarCollapsed ? (
<>
{/* Collapsed: icon-only nav */}
<div className="px-2 py-3 space-y-1">
<NavItem href="/" icon={LayoutGrid} label="" collapsed />
<NavItem href="/trees" icon={Box} label="" matchPaths={['/trees', '/flows']} collapsed />
<NavItem href="/my-trees" icon={PenLine} label="" collapsed />
<NavItem href="/sessions" icon={Clock} label="" badge={activeSessionCount || undefined} collapsed />
<NavItem href="/shares" icon={FileText} label="" collapsed />
<NavItem href="/step-library" icon={Bookmark} label="" collapsed />
<div className="flex flex-col items-center px-1.5 py-3 space-y-1">
<NavItem href="/" icon={LayoutGrid} label="Dashboard" collapsed />
<NavItem href="/trees" icon={Box} label="All Flows" matchPaths={['/trees', '/flows']} collapsed />
<NavItem href="/my-trees" icon={PenLine} label="Flow Editor" collapsed />
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
<NavItem href="/shares" icon={FileText} label="Exports" collapsed />
<NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
</div>
</>
) : (
@@ -171,7 +172,10 @@ export function Sidebar() {
<div className="flex-1" />
{/* Footer */}
<div className="border-t border-[hsl(var(--border-subtle))] px-3 py-2 space-y-0.5">
<div className={cn(
"border-t border-[hsl(var(--border-subtle))]",
sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
)}>
{!sidebarCollapsed && (
<>
<NavItem href="/account" icon={Users} label="Team" />
@@ -180,10 +184,13 @@ export function Sidebar() {
)}
<button
onClick={toggleSidebar}
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
className={cn(
"flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors",
sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2"
)}
title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{sidebarCollapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
{sidebarCollapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={18} />}
{!sidebarCollapsed && <span>Collapse</span>}
</button>
</div>