form 1 topics added

components/layout/lessons-shell.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Sidebar } from "./sidebar";
+import { useCollapsibleSidebar, SidebarBackdrop, SidebarToggle } from "./collapsible-sidebar";
+
+export function LessonsShell({ children }: { children: ReactNode }) {
+  const { mobileOpen, desktopCollapsed, toggle, closeMobile } = useCollapsibleSidebar();
+
+  return (
+    <div className="playground-frame relative mx-auto flex w-full max-w-7xl flex-1">
+      <SidebarBackdrop show={mobileOpen} onClick={closeMobile} />
+      <Sidebar mobileOpen={mobileOpen} desktopCollapsed={desktopCollapsed} onNavigate={closeMobile} />
+      <main className="min-w-0 flex-1 bg-white">
+        <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+          <SidebarToggle onClick={toggle} />
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}