mobile responsive
This commit is contained in:
gosangam
+44
-128
@@ -3,73 +3,12 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import {
|
||||
ClipboardCheck,
|
||||
Flag,
|
||||
ShieldCheck,
|
||||
Gift,
|
||||
Megaphone,
|
||||
Quote,
|
||||
FolderClosed,
|
||||
LayoutDashboard,
|
||||
LayoutGrid,
|
||||
Link2,
|
||||
LogOut,
|
||||
MessageSquare,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { api, staff, MANAGE_STAFF, type Me, type StaffMe } from "@/lib/api";
|
||||
import { Menu } from "lucide-react";
|
||||
import { api, staff, type Me, type StaffMe } from "@/lib/api";
|
||||
import { RequirePermission, StaffProvider } from "@/components/staff-context";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ConfirmProvider } from "@/components/confirm";
|
||||
|
||||
// Each entry names the permission that unlocks it, so the sidebar only shows
|
||||
// what the signed-in role can actually use.
|
||||
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,
|
||||
},
|
||||
];
|
||||
import { NAV, Sidebar } from "./sidebar";
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
@@ -81,6 +20,8 @@ export default function DashboardLayout({
|
||||
const [me, setMe] = useState<Me | null>(null);
|
||||
const [staffMe, setStaffMe] = useState<StaffMe | null>(null);
|
||||
const [checked, setChecked] = useState(false);
|
||||
// Navigation drawer, below lg only.
|
||||
const [navOpen, setNavOpen] = useState(false);
|
||||
|
||||
// Staff gate: only an account holding an admin role, and not blocked from
|
||||
// the panel, may see the dashboard. /admin/me answers both at once — it 403s
|
||||
@@ -133,84 +74,59 @@ export default function DashboardLayout({
|
||||
);
|
||||
}
|
||||
|
||||
const section =
|
||||
NAV.find(
|
||||
(n) =>
|
||||
n.href !== "/" &&
|
||||
(pathname === n.href || pathname.startsWith(n.href + "/")),
|
||||
) ?? (pathname === "/" ? NAV[0] : undefined);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<aside className="flex w-60 shrink-0 flex-col border-r border-border bg-card">
|
||||
<div className="px-5 py-5">
|
||||
<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>
|
||||
<nav className="flex-1 space-y-1 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}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
|
||||
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>
|
||||
<Sidebar
|
||||
me={me}
|
||||
staffMe={staffMe}
|
||||
pathname={pathname}
|
||||
open={navOpen}
|
||||
onClose={() => setNavOpen(false)}
|
||||
onSignOut={signOut}
|
||||
/>
|
||||
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* Below lg: a top bar with the menu button and where you are. */}
|
||||
<header className="sticky top-0 z-30 flex items-center gap-2 border-b border-border bg-card/95 px-2 py-2 backdrop-blur lg:hidden">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={signOut}
|
||||
className="w-full justify-start text-muted-foreground"
|
||||
onClick={() => setNavOpen(true)}
|
||||
aria-label="Open menu"
|
||||
className="size-10 px-0"
|
||||
>
|
||||
<LogOut className="size-4" />
|
||||
Sign out
|
||||
<Menu className="size-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
<p className="min-w-0 truncate text-sm font-semibold text-foreground">
|
||||
{section?.label ?? "Admin"}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-x-hidden px-6 py-6 lg:px-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<StaffProvider value={staffMe}>
|
||||
<ConfirmProvider>
|
||||
{/* The section's own permission, so a URL typed straight in
|
||||
<main className="min-w-0 flex-1 px-4 py-5 sm:px-6 sm:py-6 lg:px-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<StaffProvider value={staffMe}>
|
||||
<ConfirmProvider>
|
||||
{/* The section's own permission, so a URL typed straight in
|
||||
explains itself instead of failing call by call. */}
|
||||
{(() => {
|
||||
const section =
|
||||
NAV.find(
|
||||
(n) =>
|
||||
n.href !== "/" &&
|
||||
(pathname === n.href ||
|
||||
pathname.startsWith(n.href + "/")),
|
||||
) ?? (pathname === "/" ? NAV[0] : undefined);
|
||||
return section ? (
|
||||
{section ? (
|
||||
<RequirePermission perm={section.perm}>
|
||||
{children}
|
||||
</RequirePermission>
|
||||
) : (
|
||||
children
|
||||
);
|
||||
})()}
|
||||
</ConfirmProvider>
|
||||
</StaffProvider>
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
</ConfirmProvider>
|
||||
</StaffProvider>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -174,7 +174,7 @@ export function Participants({ quizId }: { quizId: string }) {
|
||||
{!detail ? (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
) : (
|
||||
<div className="max-h-[60vh] space-y-4 overflow-y-auto pr-1">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{detail.completed_at
|
||||
? `Scored ${detail.score} of ${detail.total}`
|
||||
|
||||
@@ -41,8 +41,8 @@ export default function QuizzesPage() {
|
||||
</p>
|
||||
</div>
|
||||
<Can perm="quizzes:write">
|
||||
<Link href="/quizzes/new">
|
||||
<Button>New quiz</Button>
|
||||
<Link href="/quizzes/new" className="shrink-0">
|
||||
<Button className="whitespace-nowrap">New quiz</Button>
|
||||
</Link>
|
||||
</Can>
|
||||
</header>
|
||||
|
||||
@@ -191,6 +191,7 @@ export function QuizEditor({
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Paste the page's link, e.g. /books/bg/2 or
|
||||
/transcriptions/720720sb-london. Leave empty for a stand-alone
|
||||
quiz. Each chapter, lecture or conversation can have only one
|
||||
quiz.
|
||||
</p>
|
||||
</div>
|
||||
@@ -298,7 +299,7 @@ export function QuizEditor({
|
||||
maxLength={2000}
|
||||
placeholder="Question"
|
||||
/>
|
||||
<label className="flex w-fit items-center gap-2 text-sm text-foreground">
|
||||
<label className="flex w-fit flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={q.multi}
|
||||
@@ -306,8 +307,8 @@ export function QuizEditor({
|
||||
className="accent-primary"
|
||||
/>
|
||||
Multiple correct answers
|
||||
<span className="text-xs text-muted-foreground">
|
||||
— users select all that apply
|
||||
<span className="basis-full pl-6 text-xs text-muted-foreground sm:basis-auto sm:pl-0">
|
||||
Users select all that apply
|
||||
</span>
|
||||
</label>
|
||||
<fieldset className="space-y-2">
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -145,19 +145,19 @@ export default function VaniPage() {
|
||||
|
||||
<Can perm="vani:write">
|
||||
<section className="space-y-3 rounded-xl border border-border p-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<input
|
||||
value={link}
|
||||
onChange={(e) => setLink(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && void pinByLink()}
|
||||
placeholder="Paste a link — /transcriptions/720720sb-london"
|
||||
className={`${field} min-w-0 flex-1`}
|
||||
className={`${field} w-full min-w-0 sm:flex-1`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy || !link.trim()}
|
||||
onClick={pinByLink}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||
className="shrink-0 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
Use this link
|
||||
</button>
|
||||
@@ -167,22 +167,22 @@ export default function VaniPage() {
|
||||
link when you know exactly which item you want.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 border-t border-border pt-3">
|
||||
<label className="text-sm text-muted-foreground">
|
||||
<div className="flex flex-col gap-3 border-t border-border pt-3 sm:flex-row sm:items-center">
|
||||
<label className="flex items-center text-sm text-muted-foreground">
|
||||
Date
|
||||
<input
|
||||
type="date"
|
||||
value={day}
|
||||
min={todayUTC()}
|
||||
onChange={(e) => setDay(e.target.value)}
|
||||
className={`${field} ml-2`}
|
||||
className={`${field} ml-2 min-w-0 flex-1 sm:flex-none`}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search verses, chapters and lectures"
|
||||
className={`${field} min-w-0 flex-1`}
|
||||
className={`${field} w-full min-w-0 sm:flex-1`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user