test layout

src/app/(dashboard)/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}

src/app/(dashboard)/@modal/play/home/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div className="flex items-center justify-center">Play</div>;
+}

src/app/(dashboard)/@modal/play/layout.tsx

@@ -0,0 +1,9 @@
+import { Shell } from '@/components/shell';
+
+export default function ModalLayout({ children }: React.PropsWithChildren) {
+  return (
+    <section className="h-screen w-full bg-primary">
+      <Shell>{children}</Shell>
+    </section>
+  );
+}

src/app/(dashboard)/layout.tsx

@@ -1,9 +1,11 @@
 import SidebarNav from '@/components/layouts/sidebar-nav';
 
 export default async function DashboardLayout({
-  children
+  children,
+  modal
 }: Readonly<{
   children: React.ReactNode;
+  modal: React.ReactNode;
 }>) {
   return (
     <section className="min-h-screen w-full overflow-hidden">
@@ -12,7 +14,10 @@ export default async function DashboardLayout({
         <section className="relative ml-[214px] box-border flex min-h-min w-full basis-auto flex-col">
           {/* <MainNav /> */}
           <main className="container mx-auto box-border flex min-h-0 flex-auto flex-col">
-            <div className="overflow-y-auto">{children}</div>
+            <div className="overflow-y-auto">
+              {children}
+              {/* {modal} */}
+            </div>
           </main>
         </section>
       </div>