feat: add mobile sidebar

app/books/chapter-viewer.tsx

@@ -6,6 +6,7 @@ import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -60,6 +61,10 @@ type ChapterViewerProps = {
   showBengali?: boolean;
   /** Base path for verse URLs, e.g. "/books/bg/1" — verse number is appended */
   basePath: string;
+  /** Mobile nav groups for the drawer */
+  mobileNavGroups?: MobileNavGroup[];
+  /** Book title for the mobile nav drawer header */
+  mobileNavBookTitle?: string;
 };
 
 // ---------------------------------------------------------------------------
@@ -72,12 +77,18 @@ function VerseNav({
   onPrev,
   onNext,
   verseIndex,
+  mobileNavGroups,
+  currentVerseSlug,
+  mobileNavBookTitle,
 }: {
   currentIdx: number;
   total: number;
   onPrev: () => void;
   onNext: () => void;
   verseIndex: VerseIndexEntry[];
+  mobileNavGroups?: MobileNavGroup[];
+  currentVerseSlug?: string;
+  mobileNavBookTitle?: string;
 }) {
   const hasPrev = currentIdx > 0;
   const hasNext = currentIdx < total - 1;
@@ -90,16 +101,25 @@ function VerseNav({
 
   return (
     <div className="flex items-center justify-between gap-3">
-      <Button
-        variant="outline"
-        size="sm"
-        disabled={!hasPrev}
-        onClick={onPrev}
-        className="gap-1.5"
-      >
-        <ChevronLeft className="size-4" />
-        <span className="hidden sm:inline">Previous</span>
-      </Button>
+      <div className="flex items-center gap-2">
+        {mobileNavGroups && mobileNavGroups.length > 0 && (
+          <MobileNav
+            groups={mobileNavGroups}
+            currentSlug={currentVerseSlug ?? String(current?.verse ?? "")}
+            bookTitle={mobileNavBookTitle}
+          />
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={!hasPrev}
+          onClick={onPrev}
+          className="gap-1.5"
+        >
+          <ChevronLeft className="size-4" />
+          <span className="hidden sm:inline">Previous</span>
+        </Button>
+      </div>
 
       <span className="text-sm text-muted-foreground">
         Verse {label} of {total}
@@ -220,6 +240,8 @@ export function ChapterViewer({
   chapter,
   showBengali = false,
   basePath,
+  mobileNavGroups,
+  mobileNavBookTitle,
 }: ChapterViewerProps) {
   const router = useRouter();
 
@@ -409,6 +431,9 @@ export function ChapterViewer({
           onPrev={goPrev}
           onNext={goNext}
           verseIndex={verseIndex}
+          mobileNavGroups={mobileNavGroups}
+          currentVerseSlug={String(currentVerseNum)}
+          mobileNavBookTitle={mobileNavBookTitle}
         />
 
         {/* Verse content */}
@@ -432,6 +457,9 @@ export function ChapterViewer({
           onPrev={goPrev}
           onNext={goNext}
           verseIndex={verseIndex}
+          mobileNavGroups={mobileNavGroups}
+          currentVerseSlug={String(currentVerseNum)}
+          mobileNavBookTitle={mobileNavBookTitle}
         />
       </main>
     </>