feat: add mobile sidebar

app/essays/[slug]/page.tsx

@@ -7,6 +7,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";
 import { prisma } from "@/lib/db";
 import type { JsonValue } from "@prisma/client/runtime/library";
 
@@ -127,7 +128,12 @@ export default async function EssayPage({
         {/* Main content */}
         <main className="flex-1 min-w-0 px-6 py-8 space-y-8">
           {/* Top navigation */}
-          <EssayNav prev={prev} next={next} />
+          <EssayNav
+            prev={prev}
+            next={next}
+            allEssays={allEssays}
+            currentSlug={slug}
+          />
 
           {/* Content */}
           <Card>
@@ -145,7 +151,12 @@ export default async function EssayPage({
           </Card>
 
           {/* Bottom navigation */}
-          <EssayNav prev={prev} next={next} />
+          <EssayNav
+            prev={prev}
+            next={next}
+            allEssays={allEssays}
+            currentSlug={slug}
+          />
         </main>
       </div>
     </div>
@@ -196,29 +207,54 @@ function EssaySidebar({
 function EssayNav({
   prev,
   next,
+  allEssays,
+  currentSlug,
 }: {
   prev: SidebarItem | null;
   next: SidebarItem | null;
+  allEssays: SidebarItem[];
+  currentSlug: string;
 }) {
+  const mobileNavGroups: MobileNavGroup[] = [];
+
+  if (allEssays.length > 0) {
+    mobileNavGroups.push({
+      title: "Essays",
+      items: allEssays.map((i) => ({
+        slug: i.slug,
+        label: i.title,
+        href: `/essays/${i.slug}`,
+        type: "chapter",
+      })),
+    });
+  }
+
   return (
     <div className="flex items-center justify-between gap-3">
-      {prev ? (
-        <Link
-          href={`/essays/${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.title}
-          </span>
-          <span className="sm:hidden">Previous</span>
-        </Link>
-      ) : (
-        <div />
-      )}
+      <div className="flex items-center gap-2">
+        <MobileNav
+          groups={mobileNavGroups}
+          currentSlug={currentSlug}
+          bookTitle="Essays"
+        />
+        {prev ? (
+          <Link
+            href={`/essays/${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.title}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </Link>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
 
       {next ? (
         <Link