feat: add layout shell with sidebar navigation and routing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

TaskTracker.Web/src/App.tsx

@@ -1,6 +1,20 @@
-function App() {
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-  return <div className="bg-[#0f1117] min-h-screen text-white p-8">
+import Layout from './components/Layout'
-    <h1 className="text-2xl font-semibold">TaskTracker</h1>
+import Board from './pages/Board'
-  </div>
+import Analytics from './pages/Analytics'
+import Mappings from './pages/Mappings'
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<Layout />}>
+          <Route path="/" element={<Navigate to="/board" replace />} />
+          <Route path="/board" element={<Board />} />
+          <Route path="/analytics" element={<Analytics />} />
+          <Route path="/mappings" element={<Mappings />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
 }
-export default App

TaskTracker.Web/src/components/Layout.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react'
+import { NavLink, Outlet } from 'react-router-dom'
+import { LayoutGrid, BarChart3, Link, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+
+const navItems = [
+  { to: '/board', label: 'Board', icon: LayoutGrid },
+  { to: '/analytics', label: 'Analytics', icon: BarChart3 },
+  { to: '/mappings', label: 'Mappings', icon: Link },
+]
+
+export default function Layout() {
+  const [collapsed, setCollapsed] = useState(false)
+
+  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">
+          {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-colors duration-150 ${
+                  isActive
+                    ? 'bg-[#6366f1] text-white'
+                    : 'text-[#94a3b8] hover:text-white hover:bg-white/5'
+                }`
+              }
+            >
+              <Icon size={20} className="shrink-0" />
+              {!collapsed && <span>{label}</span>}
+            </NavLink>
+          ))}
+        </nav>
+
+        <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-colors duration-150"
+          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          {collapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={20} />}
+        </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>
+          <div className="w-64 h-8 rounded-md bg-white/5" />
+        </header>
+
+        {/* Content */}
+        <main className="flex-1 overflow-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

TaskTracker.Web/src/pages/Analytics.tsx

@@ -0,0 +1,7 @@
+export default function Analytics() {
+  return (
+    <div>
+      <h1 className="text-xl font-semibold text-white">Analytics</h1>
+    </div>
+  )
+}

TaskTracker.Web/src/pages/Board.tsx

@@ -0,0 +1,7 @@
+export default function Board() {
+  return (
+    <div>
+      <h1 className="text-xl font-semibold text-white">Board</h1>
+    </div>
+  )
+}

TaskTracker.Web/src/pages/Mappings.tsx

@@ -0,0 +1,7 @@
+export default function Mappings() {
+  return (
+    <div>
+      <h1 className="text-xl font-semibold text-white">Mappings</h1>
+    </div>
+  )
+}