Nested Layouts

Add a layout.tsx inside any folder to wrap only that section. ShopEase's admin area has a sidebar that the shop does not:

app/
├── layout.tsx                 Navbar + Footer       (all pages)
├── page.tsx
└── admin/
    ├── layout.tsx             Admin sidebar         (/admin/*)
    ├── page.tsx               /admin
    ├── products/page.tsx      /admin/products
    └── orders/page.tsx        /admin/orders

app/admin/layout.tsx

import AdminSidebar from './AdminSidebar';

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[240px_1fr] min-h-screen">
      <AdminSidebar />
      <div className="p-6">{children}</div>
    </div>
  );
}

// app/shop/[category]/layout.tsx
export default async function CategoryLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ category: string }>;
}) {
  const { category } = await params;
  return (
    <section>
      <h2 className="capitalize">{category}</h2>
      {children}
    </section>
  );
}