feat: Linear-style sidebar with explicit toggle

Rewrite sidebar from scratch: 256px expanded, 56px collapsed via
click toggle + [ keyboard shortcut. Two-phase CSS transitions (labels
fade then width contracts). Contextual ContentHeader replaces
UtilityBar (no logo, just actions). Remove framer-motion sidebar
primitive, hover-to-expand, and sidebar-context.
This commit is contained in:
Usman Baig
2026-03-18 16:33:35 +01:00
parent db5cd4cbcb
commit 2474d6558f
5 changed files with 283 additions and 375 deletions

View File

@@ -1,31 +0,0 @@
'use client'
import { createContext, useCallback, useContext, useState } from 'react'
interface SidebarContextValue {
mobileOpen: boolean
openMobile: () => void
closeMobile: () => void
}
const SidebarContext = createContext<SidebarContextValue>({
mobileOpen: false,
openMobile: () => {},
closeMobile: () => {},
})
export function SidebarProvider({ children }: { children: React.ReactNode }) {
const [mobileOpen, setMobileOpen] = useState(false)
const openMobile = useCallback(() => setMobileOpen(true), [])
const closeMobile = useCallback(() => setMobileOpen(false), [])
return (
<SidebarContext.Provider value={{ mobileOpen, openMobile, closeMobile }}>
{children}
</SidebarContext.Provider>
)
}
export function useSidebar() {
return useContext(SidebarContext)
}