src/components/Layout.tsx

tsx
import { Outlet } from 'react-router-dom'
import Header from './Header'
import Sidebar from './Sidebar'
import { useUIStore } from '@/store/ui'
import { cn } from '@/lib/utils'

export default function Layout() {
  const { sidebarOpen } = useUIStore()
  return (
    <div className="flex h-screen w-full flex-col">
      <Header />
      <div className="flex min-h-0 flex-1">
        <Sidebar />
        <main className={cn('flex-1 overflow-auto p-4 sm:p-6', sidebarOpen ? 'md:ml-64' : 'md:ml-20')}>
          <div className="mx-auto max-w-[1600px]">
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  )
}

</html>