form 1 topics added

2026-07-05 11:12:45 -04:00
parent a614532810
commit a23fa53772
58 changed files with 7089 additions and 475 deletions
--- a/components/layout/collapsible-sidebar.tsx
+++ b/components/layout/collapsible-sidebar.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Shared state + styling for a sidebar that collapses in place on large screens
+ * and opens as a slide-in drawer on small ones. One toggle drives both, choosing
+ * the right behaviour by media query at click time. Defaults: open on desktop
+ * (CSS `lg:` classes), closed on mobile (state) — so SSR and hydration agree.
+ */
+export function useCollapsibleSidebar() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [desktopCollapsed, setDesktopCollapsed] = useState(false);
+
+  function toggle() {
+    if (typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches) {
+      setDesktopCollapsed((c) => !c);
+    } else {
+      setMobileOpen((o) => !o);
+    }
+  }
+
+  return {
+    mobileOpen,
+    desktopCollapsed,
+    toggle,
+    closeMobile: () => setMobileOpen(false),
+  };
+}
+
+export function sidebarAsideClass(mobileOpen: boolean, desktopCollapsed: boolean) {
+  return cn(
+    "z-40 w-64 shrink-0 border-r border-border/60 bg-surface",
+    // Small screens: a fixed slide-in drawer sitting below the header.
+    "fixed bottom-0 left-0 top-[4.125rem] transition-transform duration-200",
+    mobileOpen ? "translate-x-0 shadow-[var(--shadow-lg)]" : "-translate-x-full",
+    // Large screens: part of the layout flow, collapsible in place.
+    "lg:static lg:z-auto lg:translate-x-0 lg:shadow-none lg:transition-none",
+    desktopCollapsed ? "lg:hidden" : "lg:block",
+  );
+}
+
+export const sidebarNavClass =
+  "h-full overflow-y-auto p-4 lg:sticky lg:top-[4.125rem] lg:h-[calc(100vh-4.125rem)]";
+
+export function SidebarBackdrop({ show, onClick }: { show: boolean; onClick: () => void }) {
+  if (!show) return null;
+  return (
+    <div
+      className="fixed inset-0 z-30 bg-foreground/30 lg:hidden"
+      onClick={onClick}
+      aria-hidden="true"
+    />
+  );
+}
+
+export function SidebarToggle({ onClick, className }: { onClick: () => void; className?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      aria-label="Toggle topics menu"
+      className={cn(
+        "mb-5 inline-flex items-center gap-2 rounded-xl border border-border/60 bg-surface px-3 py-2 text-sm font-bold text-muted shadow-[var(--shadow-sm)] transition-colors hover:text-foreground",
+        className,
+      )}
+    >
+      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+      Topics
+    </button>
+  );
+}
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -9,7 +9,7 @@ const navItems = [
 export function Header() {
  return (
    <header className="sticky top-0 z-50 border-b-4 border-[#1c4ab7] bg-[#2f65e8] text-white">
-      <div className="mx-auto max-w-6xl playground-frame border-b-0 border-t-0 bg-[#2f65e8] shadow-none">
+      <div className="mx-auto max-w-7xl playground-frame border-b-0 border-t-0 bg-[#2f65e8] shadow-none">
        <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
          <Link href="/" className="group flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#ffd043] text-[#10308a] shadow-md">
--- a/components/layout/lessons-shell.tsx
+++ b/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>
+  );
+}
--- a/components/layout/mobile-nav.tsx
+++ b/components/layout/mobile-nav.tsx
@@ -1,93 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { curriculum } from "@/lib/curriculum";
-import { cn } from "@/lib/utils";
-import { useState } from "react";
-
-const unitColorMap = {
-  "unit-1": "text-unit-1-dark",
-  "unit-2": "text-unit-2-dark",
-  "unit-3": "text-unit-3-dark",
-  "unit-4": "text-unit-4-dark",
-  "unit-5": "text-unit-5-dark",
-  "unit-6": "text-unit-6-dark",
-};
-
-const unitDotColor = {
-  "unit-1": "bg-unit-1",
-  "unit-2": "bg-unit-2",
-  "unit-3": "bg-unit-3",
-  "unit-4": "bg-unit-4",
-  "unit-5": "bg-unit-5",
-  "unit-6": "bg-unit-6",
-};
-
-export function MobileNav() {
-  const pathname = usePathname();
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="lg:hidden">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 rounded-xl border border-border/60 bg-surface px-3.5 py-2 text-sm font-medium shadow-[var(--shadow-sm)] transition-all hover:shadow-[var(--shadow-md)]"
-        aria-label="Toggle navigation"
-      >
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          {isOpen ? (
-            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-          ) : (
-            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-          )}
-        </svg>
-        Topics
-      </button>
-
-      {isOpen && (
-        <div className="absolute left-0 right-0 top-full z-40 max-h-[70vh] overflow-y-auto border-b border-border/60 bg-surface p-4 shadow-[var(--shadow-lg)]">
-          <Link
-            href="/lessons"
-            onClick={() => setIsOpen(false)}
-            className="mb-4 flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-muted transition-colors hover:bg-background hover:text-foreground"
-          >
-            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
-            </svg>
-            All Topics
-          </Link>
-          <div className="mb-3 h-px bg-border/60" />
-          {curriculum.map((unit) => (
-            <div key={unit.slug} className="mb-4">
-              <p className={cn("mb-1.5 flex items-center gap-2 px-3 text-xs font-bold uppercase tracking-wider", unitColorMap[unit.color])}>
-                <span className={cn("h-2 w-2 rounded-full", unitDotColor[unit.color])} />
-                Unit {unit.number}: {unit.title}
-              </p>
-              <div className="space-y-0.5">
-                {unit.topics.map((topic) => {
-                  const href = `/lessons/${unit.slug}/${topic.slug}`;
-                  return (
-                    <Link
-                      key={topic.slug}
-                      href={href}
-                      onClick={() => setIsOpen(false)}
-                      className={cn(
-                        "block rounded-lg px-3 py-1.5 text-sm transition-colors",
-                        pathname === href
-                          ? "bg-foreground text-background font-medium"
-                          : "text-muted hover:bg-background hover:text-foreground",
-                      )}
-                    >
-                      {topic.shortTitle}
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { curriculum } from "@/lib/curriculum";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
+import { sidebarAsideClass, sidebarNavClass } from "./collapsible-sidebar";

 const unitColorMap = {
  "unit-1": {
@@ -43,9 +44,29 @@ const unitColorMap = {
    heading: "text-unit-6-dark",
    hoverBg: "hover:bg-unit-6-light/50",
  },
+  "unit-7": {
+    active: "bg-unit-7-light text-unit-7-dark border-unit-7/20",
+    dot: "bg-unit-7",
+    heading: "text-unit-7-dark",
+    hoverBg: "hover:bg-unit-7-light/50",
+  },
+  "unit-8": {
+    active: "bg-unit-8-light text-unit-8-dark border-unit-8/20",
+    dot: "bg-unit-8",
+    heading: "text-unit-8-dark",
+    hoverBg: "hover:bg-unit-8-light/50",
+  },
 };

-export function Sidebar() {
+export function Sidebar({
+  mobileOpen = false,
+  desktopCollapsed = false,
+  onNavigate,
+}: {
+  mobileOpen?: boolean;
+  desktopCollapsed?: boolean;
+  onNavigate?: () => void;
+}) {
  const pathname = usePathname();
  const [openUnits, setOpenUnits] = useState<Set<number>>(() => {
    const open = new Set<number>();
@@ -68,10 +89,11 @@ export function Sidebar() {
  }

  return (
-    <aside className="hidden w-64 shrink-0 border-r border-border/60 bg-surface lg:block">
-      <nav className="sticky top-[4.125rem] h-[calc(100vh-4.125rem)] overflow-y-auto p-4">
+    <aside className={sidebarAsideClass(mobileOpen, desktopCollapsed)}>
+      <nav className={sidebarNavClass}>
        <Link
          href="/lessons"
+          onClick={onNavigate}
          className={cn(
            "mb-4 flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200",
            pathname === "/lessons"
@@ -79,9 +101,6 @@ export function Sidebar() {
              : "text-muted hover:bg-background hover:text-foreground",
          )}
        >
-          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
-          </svg>
          All Topics
        </Link>

@@ -126,6 +145,7 @@ export function Sidebar() {
                      <Link
                        key={topic.slug}
                        href={href}
+                        onClick={onNavigate}
                        className={cn(
                          "flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm transition-all duration-200",
                          isActive