Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// app/dashboard/layout.tsx // Wraps all routes under /dashboard/** import Sidebar from '@/components/Sidebar'; import TopBar from '@/components/TopBar'; export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { return ( <div className="flex h-screen"> <Sidebar /> <div className="flex-1 flex flex-col"> <TopBar /> <main className="flex-1 overflow-y-auto p-6"> {children} </main> </div> </div> ); } // app/(auth)/layout.tsx — route group layout for /login, /register // URL is still /login and /register (no "(auth)" in path) export default function AuthLayout({ children, }: { children: React.ReactNode; }) { return ( <div className="min-h-screen flex items-center justify-center bg-gray-50"> <div className="w-full max-w-md bg-white rounded-lg shadow p-8"> {children} </div> </div> ); }
Result
Open