jason/fabdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #13 from jasonMPM/nav-bar

Browse Source 
Add files via upload
This commit is contained in:
jasonMPM
2026-03-05 16:25:31 -06:00
committed by GitHub
parent 4c9832b0ec b77eb7d649
commit ca0e7a675c
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/App.jsx
View File

@@ -36,25 +36,28 @@ export default function App() {
return (
<div className="flex h-screen bg-surface overflow-hidden">
{/* Sidebar */}
<aside className={`flex-shrink-0 bg-surface-raised border-r border-surface-border flex flex-col h-full transition-[width] duration-300 overflow-hidden ${sidebarOpen ? 'w-72' : 'w-0'}`}>
<aside
className={`flex-shrink-0 bg-surface-raised border-r border-surface-border flex flex-col h-full transition-[width] duration-300 overflow-hidden ${sidebarOpen ? 'w-72' : 'w-0'}`}
style={{ '--sidebar-width': '18rem' }}
>
<ProjectList onRegisterNewProject={fn => { newProjectFn.current = fn }} />
</aside>
{/* Toggle button — ◀ tab when open, logo-only square when collapsed */}
{/* Toggle button — docked to left edge, never overlaps calendar header */}
<button
onClick={toggleSidebar}
title={`${sidebarOpen ? 'Collapse' : 'Expand'} sidebar [B]`}
className={`absolute z-30 flex items-center justify-center
className={`fixed z-30 flex items-center justify-center
border-surface-border bg-surface-raised hover:bg-surface-elevated
transition-all duration-300
${sidebarOpen
? 'top-4 w-5 h-10 rounded-r-lg border border-l-0 hover:border-gold/40'
: 'top-0 left-0 w-16 h-16 rounded-br-2xl border-r border-b hover:border-gold/30'
? 'top-16 w-6 h-10 rounded-r-lg border border-l-0 hover:border-gold/40'
: 'top-4 left-4 w-16 h-16 rounded-xl border hover:border-gold/30 shadow-lg'
}`}
style={{ left: sidebarOpen ? 'var(--tw-sidebar-left, 18rem)' : 0 }}
style={{ left: sidebarOpen ? '18rem' : '1rem' }}
>
{sidebarOpen ? (
<span className="text-text-muted hover:text-gold text-[10px]">◀</span>
<span className="text-text-muted hover:text-gold text-[11px]">◀</span>
) : (
<img
src="/logo.png"