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.
35 lines
895 B
TypeScript
35 lines
895 B
TypeScript
'use client'
|
|
|
|
import { useState, useCallback } from 'react'
|
|
import Sidebar from './Sidebar'
|
|
import ContentHeader from './ContentHeader'
|
|
|
|
export default function DashboardShell({
|
|
siteId,
|
|
children,
|
|
}: {
|
|
siteId: string
|
|
children: React.ReactNode
|
|
}) {
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const closeMobile = useCallback(() => setMobileOpen(false), [])
|
|
const openMobile = useCallback(() => setMobileOpen(true), [])
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
<Sidebar
|
|
siteId={siteId}
|
|
mobileOpen={mobileOpen}
|
|
onMobileClose={closeMobile}
|
|
onMobileOpen={openMobile}
|
|
/>
|
|
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
<ContentHeader onMobileMenuOpen={openMobile} />
|
|
<main className="flex-1 overflow-y-auto">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|