feat: add mobile sidebar

app/books/ssr/[chapter]/page.tsx

@@ -11,6 +11,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Page
@@ -70,7 +71,12 @@ export default async function SsrChapterPage({
         {/* Main content */}
         <main className="flex-1 min-w-0 px-6 py-8 space-y-8">
           {/* Top navigation */}
-          <SsrNav prev={prev} next={next} />
+          <SsrNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
 
           {/* Content */}
           <Card>
@@ -88,7 +94,12 @@ export default async function SsrChapterPage({
           </Card>
 
           {/* Bottom navigation */}
-          <SsrNav prev={prev} next={next} />
+          <SsrNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
         </main>
       </div>
     </div>
@@ -225,29 +236,89 @@ function SidebarLink({
 function SsrNav({
   prev,
   next,
+  sidebarItems,
+  currentSlug,
 }: {
   prev: SsrSidebarItem | null;
   next: SsrSidebarItem | null;
+  sidebarItems: SsrSidebarItem[];
+  currentSlug: string;
 }) {
+  const mobileNavGroups: MobileNavGroup[] = [];
+
+  const frontMatter = sidebarItems.filter(
+    (i) => i.type === "intro-segment" && i.slug !== "intro-about-the-author",
+  );
+  if (frontMatter.length > 0) {
+    mobileNavGroups.push({
+      title: "Front Matter",
+      items: frontMatter.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/ssr/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
+  const chapterItems = sidebarItems.filter(
+    (i) => i.type === "parent" || i.type === "sub-chapter",
+  );
+  if (chapterItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Chapters",
+      items: chapterItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/ssr/${i.slug}`,
+        type: i.type,
+        parentChapter: i.parentChapter,
+        isParent: i.type === "parent",
+      })),
+    });
+  }
+
+  const backMatter = sidebarItems.filter(
+    (i) => i.slug === "intro-about-the-author",
+  );
+  if (backMatter.length > 0) {
+    mobileNavGroups.push({
+      title: "Back Matter",
+      items: backMatter.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/ssr/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
   return (
     <div className="flex items-center justify-between gap-3">
-      {prev ? (
-        <Link
-          href={`/books/ssr/${prev.slug}`}
-          className={cn(
-            buttonVariants({ variant: "outline", size: "sm" }),
-            "gap-1.5",
-          )}
-        >
-          <ChevronLeft className="size-4" />
-          <span className="hidden sm:inline truncate max-w-[180px]">
-            {prev.label}
-          </span>
-          <span className="sm:hidden">Previous</span>
-        </Link>
-      ) : (
-        <div />
-      )}
+      <div className="flex items-center gap-2">
+        <MobileNav
+          groups={mobileNavGroups}
+          currentSlug={currentSlug}
+          bookTitle="The Science of Self-Realization"
+        />
+        {prev ? (
+          <Link
+            href={`/books/ssr/${prev.slug}`}
+            className={cn(
+              buttonVariants({ variant: "outline", size: "sm" }),
+              "gap-1.5",
+            )}
+          >
+            <ChevronLeft className="size-4" />
+            <span className="hidden sm:inline truncate max-w-[180px]">
+              {prev.label}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </Link>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
 
       {next ? (
         <Link