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 { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom' import { useNavigate, useLocation } from 'react-router-dom'
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react' 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 { useUserPreferencesStore } from '@/store/userPreferencesStore'
import { CategoryList } from '@/components/sidebar/CategoryList' import { CategoryList } from '@/components/sidebar/CategoryList'
import { TagCloud } from '@/components/sidebar/TagCloud' import { TagCloud } from '@/components/sidebar/TagCloud'
@@ -115,13 +116,13 @@ export function Sidebar() {
{sidebarCollapsed ? ( {sidebarCollapsed ? (
<> <>
{/* Collapsed: icon-only nav */} {/* Collapsed: icon-only nav */}
<div className="px-2 py-3 space-y-1"> <div className="flex flex-col items-center px-1.5 py-3 space-y-1">
<NavItem href="/" icon={LayoutGrid} label="" collapsed /> <NavItem href="/" icon={LayoutGrid} label="Dashboard" collapsed />
<NavItem href="/trees" icon={Box} label="" matchPaths={['/trees', '/flows']} collapsed /> <NavItem href="/trees" icon={Box} label="All Flows" matchPaths={['/trees', '/flows']} collapsed />
<NavItem href="/my-trees" icon={PenLine} label="" collapsed /> <NavItem href="/my-trees" icon={PenLine} label="Flow Editor" collapsed />
<NavItem href="/sessions" icon={Clock} label="" badge={activeSessionCount || undefined} collapsed /> <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
<NavItem href="/shares" icon={FileText} label="" collapsed /> <NavItem href="/shares" icon={FileText} label="Exports" collapsed />
<NavItem href="/step-library" icon={Bookmark} label="" collapsed /> <NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
</div> </div>
</> </>
) : ( ) : (
@@ -171,7 +172,10 @@ export function Sidebar() {
<div className="flex-1" /> <div className="flex-1" />
{/* Footer */} {/* 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 && ( {!sidebarCollapsed && (
<> <>
<NavItem href="/account" icon={Users} label="Team" /> <NavItem href="/account" icon={Users} label="Team" />
@@ -180,10 +184,13 @@ export function Sidebar() {
)} )}
<button <button
onClick={toggleSidebar} 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'} title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
> >
{sidebarCollapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />} {sidebarCollapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={18} />}
{!sidebarCollapsed && <span>Collapse</span>} {!sidebarCollapsed && <span>Collapse</span>}
</button> </button>
</div> </div>