feat: add mobile sidebar

2026-04-17 23:20:59 +05:30
parent 0aab1d23ec
commit 9b5823146f
30 changed files with 2502 additions and 414 deletions
@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Menu } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type MobileNavItem = {
+  slug: string;
+  label: string;
+  href: string;
+  type: string;
+  /** For hierarchical books (SSR, DS) — parent chapter number */
+  parentChapter?: number | null;
+  /** Whether this is a non-clickable parent heading */
+  isParent?: boolean;
+};
+
+export type MobileNavGroup = {
+  title?: string;
+  items: MobileNavItem[];
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Mobile sidebar drawer triggered by a menu button.
+ *
+ * Usage: Place this component alongside the prev/next buttons in any
+ * book reader page. It renders a menu icon button (visible only on
+ * mobile / below `lg` breakpoint) that opens a bottom drawer with
+ * the full sidebar navigation.
+ *
+ * Supports two modes:
+ *   1. **Flat groups** — pass `groups` for simple grouped lists
+ *      (Front Matter, Chapters, etc.)
+ *   2. **Hierarchical** — pass `groups` where some items have
+ *      `isParent: true` to render parent headings with indented children
+ */
+export function MobileNav({
+  groups,
+  currentSlug,
+  bookTitle,
+}: {
+  groups: MobileNavGroup[];
+  currentSlug: string;
+  bookTitle?: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen} direction="left">
+      <DrawerTrigger
+        className={cn(
+          buttonVariants({ variant: "outline", size: "sm" }),
+          "lg:hidden gap-1.5",
+        )}
+      >
+        <Menu className="size-4" />
+        <span className="hidden sm:inline">Contents</span>
+      </DrawerTrigger>
+      <DrawerContent direction="left" className="h-full">
+        <DrawerHeader className="text-left border-b border-border pb-4 mb-2">
+          <DrawerTitle>{bookTitle ?? "Contents"}</DrawerTitle>
+        </DrawerHeader>
+        <nav className="overflow-y-auto px-4 pb-6 pt-2 space-y-4">
+          {groups.map((group, gi) => (
+            <div key={gi}>
+              {group.title && (
+                <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2 px-2">
+                  {group.title}
+                </h3>
+              )}
+              <div className="flex flex-col gap-0.5">
+                {group.items.map((item) => {
+                  if (item.isParent) {
+                    return (
+                      <div
+                        key={item.slug}
+                        className="px-2 py-1.5 text-xs font-bold text-muted-foreground mt-2"
+                      >
+                        {item.label}
+                      </div>
+                    );
+                  }
+
+                  const isActive = item.slug === currentSlug;
+                  const isChild = item.parentChapter != null && !item.isParent;
+
+                  return (
+                    <DrawerClose key={item.slug} asChild>
+                      <Link
+                        href={item.href}
+                        className={cn(
+                          "px-2 py-2 rounded-md text-sm transition-colors truncate block",
+                          isChild && "pl-4",
+                          isActive
+                            ? "bg-primary/10 text-primary font-medium"
+                            : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                        )}
+                        onClick={() => setOpen(false)}
+                      >
+                        {item.label}
+                      </Link>
+                    </DrawerClose>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </nav>
+      </DrawerContent>
+    </Drawer>
+  );
+}