Responsive dashboard layout with CSS Grid

Here's a modern approach using CSS Grid + Tailwind CSS:

tsxCopy
export function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[auto_1fr] min-h-screen">
      {/* Sidebar — fixed width on desktop, hidden on mobile */}
      <aside className="hidden md:flex w-64 flex-col border-r bg-sidebar">
        <SidebarContent />
      </aside>

      {/* Main content area */}
      <main className="flex flex-col min-w-0">
        {/* Mobile header with hamburger menu */}
        <header className="md:hidden flex items-center h-14 px-4 border-b">
          <MobileMenuButton />
          <span className="ml-3 font-semibold">Solvoke Synap</span>
        </header>

        <div className="flex-1 overflow-auto p-6">
          {children}
        </div>
      </main>
    </div>
  );
}

Why CSS Grid over Flexbox here:

• grid-cols-[auto_1fr] gives the sidebar its natural width and the content fills the rest
• min-w-0 on main prevents content from overflowing the grid cell
• Clean separation between sidebar and content without negative margins

For the mobile sheet/drawer, use Radix Dialog or shadcn/ui Sheet component.