mobile responsive
This commit is contained in:
gosangam
@@ -0,0 +1,194 @@
|
||||
"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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user