feat(ui): replace sidebar with slim top navigation bar
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react'
|
||||
import { NavLink, Outlet, useNavigate } from 'react-router-dom'
|
||||
import { LayoutGrid, BarChart3, Link, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
|
||||
import SearchBar from './SearchBar.tsx'
|
||||
import { LayoutGrid, BarChart3, Link, Plus, Search } from 'lucide-react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import SearchModal from './SearchModal.tsx'
|
||||
|
||||
const navItems = [
|
||||
{ to: '/board', label: 'Board', icon: LayoutGrid },
|
||||
@@ -10,60 +10,99 @@ const navItems = [
|
||||
]
|
||||
|
||||
export default function Layout() {
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
const [showCreateHint, setShowCreateHint] = useState(false)
|
||||
|
||||
// Global Cmd+K handler
|
||||
const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault()
|
||||
setSearchOpen(true)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleGlobalKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleGlobalKeyDown)
|
||||
}, [handleGlobalKeyDown])
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-[#0f1117] text-white overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className="flex flex-col justify-between shrink-0 transition-all duration-200"
|
||||
style={{
|
||||
width: collapsed ? 60 : 200,
|
||||
background: 'linear-gradient(180deg, #0f1117 0%, #161922 100%)',
|
||||
}}
|
||||
>
|
||||
<nav className="flex flex-col gap-1 mt-4 px-2">
|
||||
<div className="flex flex-col h-screen bg-[var(--color-page)] text-[var(--color-text-primary)] overflow-hidden">
|
||||
{/* Top navigation bar */}
|
||||
<header className="flex items-center h-12 px-4 border-b border-[var(--color-border)] shrink-0 bg-[var(--color-page)]">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2 mr-8">
|
||||
<div className="w-5 h-5 rounded bg-gradient-to-br from-[var(--color-accent)] to-[var(--color-accent-end)] flex items-center justify-center">
|
||||
<span className="text-[10px] font-bold text-white">T</span>
|
||||
</div>
|
||||
<span className="text-sm font-semibold tracking-tight">TaskTracker</span>
|
||||
</div>
|
||||
|
||||
{/* Nav tabs */}
|
||||
<nav className="flex items-center gap-1">
|
||||
{navItems.map(({ to, label, icon: Icon }) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
to={to}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
|
||||
`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-medium transition-colors ${
|
||||
isActive
|
||||
? 'bg-[#6366f1] text-white'
|
||||
: 'text-[#94a3b8] hover:text-white hover:bg-white/5'
|
||||
? 'text-white bg-white/[0.08]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-white hover:bg-white/[0.04]'
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Icon size={20} className="shrink-0" />
|
||||
{!collapsed && <span>{label}</span>}
|
||||
<Icon size={15} />
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Search trigger */}
|
||||
<button
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="flex items-center justify-center p-3 mb-2 mx-2 rounded-lg text-[#94a3b8] hover:text-white hover:bg-white/5 transition-all duration-200"
|
||||
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex items-center gap-2 h-7 px-2.5 rounded-md text-[12px] text-[var(--color-text-secondary)] bg-white/[0.04] border border-[var(--color-border)] hover:border-[var(--color-border-hover)] hover:text-[var(--color-text-primary)] transition-colors mr-2"
|
||||
>
|
||||
{collapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={20} />}
|
||||
<Search size={13} />
|
||||
<span className="hidden sm:inline">Search</span>
|
||||
<kbd className="hidden sm:inline text-[10px] font-mono text-[var(--color-text-tertiary)] bg-white/[0.06] px-1 py-0.5 rounded">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
{/* Main area */}
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
{/* Top bar */}
|
||||
<header className="flex items-center justify-between h-14 px-6 border-b border-white/5 shrink-0">
|
||||
<h1 className="text-lg font-semibold tracking-tight">TaskTracker</h1>
|
||||
<SearchBar onSelect={(taskId) => navigate(`/board?task=${taskId}`)} />
|
||||
</header>
|
||||
{/* New task button */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/board')
|
||||
setShowCreateHint(true)
|
||||
setTimeout(() => setShowCreateHint(false), 100)
|
||||
}}
|
||||
className="flex items-center gap-1 h-7 px-2.5 rounded-md text-[12px] font-medium text-white bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-end)] hover:brightness-110 transition-all"
|
||||
>
|
||||
<Plus size={14} />
|
||||
<span className="hidden sm:inline">New Task</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<main className="flex-1 overflow-auto p-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<main className="flex-1 overflow-auto p-5">
|
||||
<Outlet context={{ showCreateHint }} />
|
||||
</main>
|
||||
|
||||
{/* Search modal */}
|
||||
{searchOpen && (
|
||||
<SearchModal
|
||||
onSelect={(taskId) => {
|
||||
setSearchOpen(false)
|
||||
navigate(`/board?task=${taskId}`)
|
||||
}}
|
||||
onClose={() => setSearchOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user