AppLayout.tsx

import { useState, useCallback } from 'react';
import type { ReactNode } from 'react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';

export function AppLayout({
  children,
  title,
}: {
  children: ReactNode;
  title: string;
}) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const closeSidebar = useCallback(() => setSidebarOpen(false), []);
  const toggleSidebar = useCallback(() => setSidebarOpen((prev) => !prev), []);

  return (
    <div className="min-h-screen bg-surface-50 grid grid-cols-[1fr] lg:grid-cols-[256px_1fr]">
      <Sidebar open={sidebarOpen} onClose={closeSidebar} />
      <div className="col-start-1 lg:col-start-2">
        <Header title={title} onMenuClick={toggleSidebar} />
        <main className="p-4 sm:p-6">{children}</main>
      </div>
    </div>
  );
}