feat: add mobile sidebar

app/books/iso/[mantra]/page.tsx

@@ -12,6 +12,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";
 
 // ---------------------------------------------------------------------------
 // Type guards
@@ -79,14 +80,24 @@ export default async function IsoMantraPage({
         {/* Main content */}
         <main className="flex-1 min-w-0 px-6 py-8 space-y-8">
           {/* Top navigation */}
-          <IsoNav prev={prev} next={next} />
+          <IsoNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
 
           {/* Content */}
           {verse && <VerseContent verse={verse} />}
           {intro && <IntroContent intro={intro} />}
 
           {/* Bottom navigation */}
-          <IsoNav prev={prev} next={next} />
+          <IsoNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
         </main>
       </div>
     </div>
@@ -295,31 +306,90 @@ function SidebarLink({
 function IsoNav({
   prev,
   next,
+  sidebarItems,
+  currentSlug,
 }: {
   prev: IsoSidebarItem | null;
   next: IsoSidebarItem | null;
+  sidebarItems: IsoSidebarItem[];
+  currentSlug: string;
 }) {
+  const mobileNavGroups: MobileNavGroup[] = [];
+
+  // Front matter (front-pages + introduction)
+  const frontMatterItems = sidebarItems.filter(
+    (i) => i.slug === "intro-front-pages" || i.slug === "intro-introduction",
+  );
+  if (frontMatterItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Front Matter",
+      items: frontMatterItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/iso/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
+  // Mantras (invocation + 1-18)
+  const mantraItems = sidebarItems.filter((i) => i.type === "verse");
+  if (mantraItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Mantras",
+      items: mantraItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/iso/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
+  // Back matter (about-the-author)
+  const backMatterItems = sidebarItems.filter(
+    (i) => i.slug === "intro-about-the-author",
+  );
+  if (backMatterItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Back Matter",
+      items: backMatterItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/iso/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
   return (
     <div className="flex items-center justify-between gap-3">
-      {prev ? (
-        <Link
-          href={`/books/iso/${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 === "verse" && prev.mantra != null && prev.mantra > 0
-              ? `Mantra ${prev.mantra}`
-              : prev.label}
-          </span>
-          <span className="sm:hidden">Previous</span>
-        </Link>
-      ) : (
-        <div />
-      )}
+      <div className="flex items-center gap-2">
+        <MobileNav
+          groups={mobileNavGroups}
+          currentSlug={currentSlug}
+          bookTitle="Śrī Īśopaniṣad"
+        />
+        {prev ? (
+          <Link
+            href={`/books/iso/${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 === "verse" && prev.mantra != null && prev.mantra > 0
+                ? `Mantra ${prev.mantra}`
+                : prev.label}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </Link>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
 
       {next ? (
         <Link