feat: add mobile sidebar

app/books/ochkm/[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
@@ -64,7 +65,12 @@ export default async function OchkmChapterPage({
         {/* Main content */}
         <main className="flex-1 min-w-0 px-6 py-8 space-y-8">
           {/* Top navigation */}
-          <OchkmNav prev={prev} next={next} />
+          <OchkmNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
 
           {/* Content */}
           <Card>
@@ -82,7 +88,12 @@ export default async function OchkmChapterPage({
           </Card>
 
           {/* Bottom navigation */}
-          <OchkmNav prev={prev} next={next} />
+          <OchkmNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
         </main>
       </div>
     </div>
@@ -174,31 +185,70 @@ function SidebarLink({
 function OchkmNav({
   prev,
   next,
+  sidebarItems,
+  currentSlug,
 }: {
   prev: OchkmSidebarItem | null;
   next: OchkmSidebarItem | null;
+  sidebarItems: OchkmSidebarItem[];
+  currentSlug: string;
 }) {
+  const mobileNavGroups: MobileNavGroup[] = [];
+
+  const introItems = sidebarItems.filter((i) => i.type === "intro-segment");
+  if (introItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Front Matter",
+      items: introItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/ochkm/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
+  const chapterItems = sidebarItems.filter((i) => i.type === "chapter");
+  if (chapterItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Chapters",
+      items: chapterItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/ochkm/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
   return (
     <div className="flex items-center justify-between gap-3">
-      {prev ? (
-        <Link
-          href={`/books/ochkm/${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.type === "chapter" && prev.chapter != null
-              ? `Ch. ${prev.chapter}`
-              : prev.label}
-          </span>
-          <span className="sm:hidden">Previous</span>
-        </Link>
-      ) : (
-        <div />
-      )}
+      <div className="flex items-center gap-2">
+        <MobileNav
+          groups={mobileNavGroups}
+          currentSlug={currentSlug}
+          bookTitle="On Chanting the Hare Kṛṣṇa Mantra"
+        />
+        {prev ? (
+          <Link
+            href={`/books/ochkm/${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.type === "chapter" && prev.chapter != null
+                ? `Ch. ${prev.chapter}`
+                : prev.label}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </Link>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
 
       {next ? (
         <Link