spsays-admin/app/(dashboard)/sidebar.tsx

"use client";

/**
 * The dashboard's navigation.
 *
 * From lg up it's a fixed column beside the page. Below that it's a drawer
 * that slides in from the left, opened from the top bar's menu button, so
 * phones get the full width for the page itself.
 */

import { useEffect } from "react";
import Link from "next/link";
import {
  ClipboardCheck,
  Flag,
  ShieldCheck,
  Gift,
  Megaphone,
  Quote,
  FolderClosed,
  LayoutDashboard,
  LayoutGrid,
  Link2,
  LogOut,
  MessageSquare,
  Users,
  X,
} from "lucide-react";
import { MANAGE_STAFF, type Me, type StaffMe } from "@/lib/api";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

// Each entry names the permission that unlocks it, so the sidebar only shows
// what the signed-in role can actually use.
export const NAV = [
  { href: "/", label: "Overview", icon: LayoutDashboard, perm: "stats:read" },
  { href: "/users", label: "Users", icon: Users, perm: "users:read" },
  { href: "/posts", label: "Posts", icon: LayoutGrid, perm: "posts:moderate" },
  {
    href: "/collections",
    label: "Collections",
    icon: FolderClosed,
    perm: "collections:read",
  },
  {
    href: "/short-urls",
    label: "Short URLs",
    icon: Link2,
    perm: "short_urls:read",
  },
  {
    href: "/feedback",
    label: "Feedback",
    icon: MessageSquare,
    perm: "feedback:read",
  },
  { href: "/reports", label: "Reports", icon: Flag, perm: "reports:read" },
  {
    href: "/broadcasts",
    label: "Announcements",
    icon: Megaphone,
    perm: "broadcasts:read",
  },
  { href: "/reward-gifts", label: "Gifts", icon: Gift, perm: "rewards:read" },
  { href: "/vani", label: "Vāṇī of the Day", icon: Quote, perm: "vani:read" },
  {
    href: "/quizzes",
    label: "Quizzes",
    icon: ClipboardCheck,
    perm: "quizzes:read",
  },
  {
    href: "/staff",
    label: "Staff & roles",
    icon: ShieldCheck,
    perm: MANAGE_STAFF,
  },
];

export function Sidebar({
  me,
  staffMe,
  pathname,
  open,
  onClose,
  onSignOut,
}: {
  me: Me;
  staffMe: StaffMe;
  pathname: string;
  /** Drawer state below lg; ignored from lg up, where it's always shown. */
  open: boolean;
  onClose: () => void;
  onSignOut: () => void;
}) {
  // While the drawer is open: Escape closes it and the page behind it
  // doesn't scroll.
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open, onClose]);

  return (
    <>
      {/* Backdrop — drawer only. */}
      <div
        aria-hidden
        onClick={onClose}
        className={cn(
          "fixed inset-0 z-40 bg-black/40 transition-opacity lg:hidden",
          open ? "opacity-100" : "pointer-events-none opacity-0",
        )}
      />
      <aside
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col border-r border-border bg-card transition-transform duration-200",
          open ? "translate-x-0 shadow-xl" : "-translate-x-full",
          // lg+: an ordinary column in the page flow.
          "lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-60 lg:translate-x-0 lg:shadow-none",
        )}
      >
        <div className="flex items-start justify-between px-5 py-5">
          <div>
            <p className="text-xs uppercase tracking-[0.2em] text-primary">
              Prabhupāda Says
            </p>
            <p className="mt-0.5 text-sm font-semibold text-foreground">
              Admin
            </p>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            aria-label="Close menu"
            className="-mr-2 size-9 px-0 lg:hidden"
          >
            <X className="size-5" />
          </Button>
        </div>
        <nav className="flex-1 space-y-1 overflow-y-auto px-3">
          {NAV.filter((n) => staffMe.permissions.includes(n.perm)).map(
            ({ href, label, icon: Icon }) => {
              const active =
                pathname === href || pathname.startsWith(href + "/");
              return (
                <Link
                  key={href}
                  href={href}
                  // Picking a section closes the drawer on small screens.
                  onClick={onClose}
                  className={cn(
                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors lg:py-2",
                    active
                      ? "bg-accent text-accent-foreground font-medium"
                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
                  )}
                >
                  <Icon className="size-4" />
                  {label}
                </Link>
              );
            },
          )}
        </nav>
        <div className="border-t border-border px-3 py-3">
          <div className="px-3 pb-2 text-xs text-muted-foreground">
            <p className="truncate font-medium text-foreground">{me.name}</p>
            <p className="truncate">@{me.handle}</p>
            <p className="mt-1 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
              {staffMe.role_name}
            </p>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={onSignOut}
            className="w-full justify-start text-muted-foreground"
          >
            <LogOut className="size-4" />
            Sign out
          </Button>
        </div>
      </aside>
    </>
  );
}