feat: add mobile sidebar

app/books/noi/[text]/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 NoiTextPage({
         {/* Main content */}
         <main className="flex-1 min-w-0 px-6 py-8 space-y-8">
           {/* Top navigation */}
-          <NoiNav prev={prev} next={next} />
+          <NoiNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
 
           {/* Content */}
           {verse && <VerseContent verse={verse} />}
           {intro && <IntroContent intro={intro} />}
 
           {/* Bottom navigation */}
-          <NoiNav prev={prev} next={next} />
+          <NoiNav
+            prev={prev}
+            next={next}
+            sidebarItems={sidebarItems}
+            currentSlug={slug}
+          />
         </main>
       </div>
     </div>
@@ -210,9 +221,7 @@ function NoiSidebar({
   // Texts = 1-11
   const textItems = items.filter((item) => item.type === "verse");
   // Appendixes comes last
-  const appendixesItem = items.find(
-    (item) => item.slug === "intro-appendixes",
-  );
+  const appendixesItem = items.find((item) => item.slug === "intro-appendixes");
 
   return (
     <aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
@@ -295,31 +304,90 @@ function SidebarLink({
 function NoiNav({
   prev,
   next,
+  sidebarItems,
+  currentSlug,
 }: {
   prev: NoiSidebarItem | null;
   next: NoiSidebarItem | null;
+  sidebarItems: NoiSidebarItem[];
+  currentSlug: string;
 }) {
+  const mobileNavGroups: MobileNavGroup[] = [];
+
+  // Front matter (front-pages + preface)
+  const frontMatterItems = sidebarItems.filter(
+    (i) => i.slug === "intro-front-pages" || i.slug === "intro-preface",
+  );
+  if (frontMatterItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Front Matter",
+      items: frontMatterItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/noi/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
+  // Texts (1-11)
+  const textItems = sidebarItems.filter((i) => i.type === "verse");
+  if (textItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Texts",
+      items: textItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/noi/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
+  // Back matter (appendixes)
+  const backMatterItems = sidebarItems.filter(
+    (i) => i.slug === "intro-appendixes",
+  );
+  if (backMatterItems.length > 0) {
+    mobileNavGroups.push({
+      title: "Back Matter",
+      items: backMatterItems.map((i) => ({
+        slug: i.slug,
+        label: i.label,
+        href: `/books/noi/${i.slug}`,
+        type: i.type,
+      })),
+    });
+  }
+
   return (
     <div className="flex items-center justify-between gap-3">
-      {prev ? (
-        <Link
-          href={`/books/noi/${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.text != null
-              ? `Text ${prev.text}`
-              : 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 Nectar of Instruction"
+        />
+        {prev ? (
+          <Link
+            href={`/books/noi/${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.text != null
+                ? `Text ${prev.text}`
+                : prev.label}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </Link>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
 
       {next ? (
         <Link