form 1 topics added

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