fix : one line header

2026-10-02 12:19:36 +07:00
parent 724234a6f9
commit 21709a30d9
3 changed files with 100 additions and 33 deletions
@@ -11,11 +11,13 @@ import {
  ClipboardListIcon,
  MessagesSquareIcon,
  LogOutIcon,
+  MenuIcon,
  PlusIcon,
  SwordsIcon,
 } from "lucide-react";

-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { authClient } from "@/lib/auth/client";
 import { unsubscribeCommissionPush } from "@/components/commission/push-client";
 import { CommissionPushEntryPrompt } from "@/components/commission/push-entry-prompt";
@@ -23,19 +25,40 @@ import { CommissionPushEntryPrompt } from "@/components/commission/push-entry-pr
 export function AdminHeader() {
  const pathname = usePathname();
  const router = useRouter();
+  const mobileLinks = [
+    { href: "/admin/commission", label: "Commission", icon: MessagesSquareIcon, active: pathname.startsWith("/admin/commission") },
+    { href: "/admin/stygian", label: "Stygian", icon: SwordsIcon, active: pathname === "/admin/stygian" },
+    { href: "/admin/activity", label: "Activity", icon: ClipboardListIcon, active: pathname === "/admin/activity" },
+    { href: "/admin/glossary", label: "Glossary", icon: BookOpenIcon, active: pathname === "/admin/glossary" },
+    { href: "/admin", label: "Dashboard", icon: LayoutDashboardIcon, active: pathname === "/admin" },
+    { href: "/admin/create", label: "New Guide", icon: PlusIcon, active: pathname === "/admin/create" },
+    { href: "/admin/image/overview", label: "Image Generator", icon: ImageIcon, active: pathname.startsWith("/admin/image") },
+  ];
+  const signOut = async () => {
+    await unsubscribeCommissionPush().catch(() => undefined);
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          router.push("/admin/login");
+          router.refresh();
+        },
+      },
+    });
+  };

  return (<>
    <CommissionPushEntryPrompt scope="admin" />
    <header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
-      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-wrap items-center gap-2 px-4 py-2 sm:px-6">
+      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-nowrap items-center gap-2 px-4 py-2 sm:px-6">
        <Link
          href="/admin"
-          className="mr-auto flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="หน้าแอดมิน ไกด์เกนชินไม่ใช่เกมมือถือ"
+          className="mr-auto flex min-h-11 shrink-0 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
          <span className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
        </Link>
-        <nav aria-label="Admin navigation" className="flex items-center gap-1">
+        <nav aria-label="Admin navigation" className="hidden items-center gap-1 xl:flex">
          <Button variant={pathname.startsWith("/admin/commission") ? "secondary" : "ghost"}
            size="sm" nativeButton={false} render={<Link href="/admin/commission" />}>
            <MessagesSquareIcon data-icon="inline-start" /><span className="hidden sm:inline">Commission</span>
@@ -109,21 +132,35 @@ export function AdminHeader() {
            variant="ghost"
            size="icon-sm"
            aria-label="ออกจากระบบ"
-            onClick={async () => {
-              await unsubscribeCommissionPush().catch(() => undefined);
-              await authClient.signOut({
-                fetchOptions: {
-                  onSuccess: () => {
-                    router.push("/admin/login");
-                    router.refresh();
-                  },
-                },
-              });
-            }}
+            onClick={signOut}
          >
            <LogOutIcon />
          </Button>
        </nav>
+        <Sheet>
+          <SheetTrigger render={<Button variant="ghost" size="icon" className="xl:hidden" aria-label="เปิดเมนู" />}>
+            <MenuIcon />
+          </SheetTrigger>
+          <SheetContent side="right">
+            <SheetHeader><SheetTitle>เมนูแอดมิน</SheetTitle></SheetHeader>
+            <nav aria-label="Admin mobile navigation" className="flex flex-col gap-1 overflow-y-auto px-3 pb-4">
+              {mobileLinks.map(({ href, label, icon: Icon, active }) => (
+                <SheetClose
+                  key={href}
+                  render={<Link href={href} className={buttonVariants({ variant: active ? "secondary" : "ghost", className: "h-11 w-full justify-start" })} />}
+                >
+                  <Icon data-icon="inline-start" />{label}
+                </SheetClose>
+              ))}
+              <SheetClose render={<Link href="/" target="_blank" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
+                <ExternalLinkIcon data-icon="inline-start" />เปิดหน้าเว็บไซต์
+              </SheetClose>
+              <Button variant="ghost" className="h-11 w-full justify-start" onClick={signOut}>
+                <LogOutIcon data-icon="inline-start" />ออกจากระบบ
+              </Button>
+            </nav>
+          </SheetContent>
+        </Sheet>
      </div>
    </header>
    </>
@@ -1,38 +1,44 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
+import { MenuIcon } from "lucide-react";

-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { VisitorPresence } from "@/components/public/visitor-presence";
 import { getAdminSession } from "@/lib/auth/server";

-async function AdminEditLink({ editHref }: { editHref: string }) {
+async function AdminEditLink({ editHref, mobile = false }: { editHref: string; mobile?: boolean }) {
  const isAdmin = Boolean(await getAdminSession());

  return isAdmin ? (
-    <Button
-      variant="ghost"
-      size="sm"
-      nativeButton={false}
-      render={<Link href={editHref} />}
+    mobile ? (
+      <SheetClose
+        render={<Link href={editHref} className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}
      >
        ไปหน้าแก้ไข
+      </SheetClose>
+    ) : (
+      <Button variant="ghost" size="sm" nativeButton={false} render={<Link href={editHref} />}>
+        ไปหน้าแก้ไข
      </Button>
+    )
  ) : null;
 }

 export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string; guideId?: string } = {}) {
  return (
    <header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
-      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-wrap items-center gap-2 px-4 py-2 sm:px-6">
+      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-nowrap items-center gap-2 px-4 py-2 sm:px-6">
        <Link
          href="/"
-          className="mr-auto flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="หน้าแรก ไกด์เกนชินไม่ใช่เกมมือถือ"
+          className="mr-auto flex min-h-11 shrink-0 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
          <span className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
        </Link>
-        <nav aria-label="Public navigation" className="flex items-center gap-1">
+        <nav aria-label="Public navigation" className="hidden items-center gap-1 lg:flex">
          <Button variant="ghost" size="sm" nativeButton={false} render={<Link href="/commission" />}>
            <Image src="/icon/commission.webp" alt="" width={24} height={24} className="size-6 object-contain" />
            Commission
@@ -46,11 +52,32 @@ export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string
            <Image src="/icon/stygian.webp" alt="" width={24} height={24} className="size-6 object-contain" />
            Stygian Guide
          </Button>
-          <VisitorPresence guideId={guideId} />
          <Suspense fallback={null}>
            <AdminEditLink editHref={editHref} />
          </Suspense>
        </nav>
+        <VisitorPresence guideId={guideId} />
+        <Sheet>
+          <SheetTrigger render={<Button variant="ghost" size="icon" className="lg:hidden" aria-label="เปิดเมนู" />}>
+            <MenuIcon />
+          </SheetTrigger>
+          <SheetContent side="right">
+            <SheetHeader><SheetTitle>เมนู</SheetTitle></SheetHeader>
+            <nav aria-label="Public mobile navigation" className="flex flex-col gap-1 px-3">
+              <SheetClose render={<Link href="/commission" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
+                <Image src="/icon/commission.webp" alt="" width={24} height={24} className="size-6 object-contain" />
+                Commission
+              </SheetClose>
+              <SheetClose render={<Link href="/stygian" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
+                <Image src="/icon/stygian.webp" alt="" width={24} height={24} className="size-6 object-contain" />
+                Stygian Guide
+              </SheetClose>
+              <Suspense fallback={null}>
+                <AdminEditLink editHref={editHref} mobile />
+              </Suspense>
+            </nav>
+          </SheetContent>
+        </Sheet>
      </div>
    </header>
  );
@@ -13,17 +13,20 @@ export function VisitorPresence({ guideId }: { guideId?: string }) {
        variant="secondary"
        className="tabular-nums"
        title="ผู้เข้าชมทั้งหมดที่กำลังออนไลน์"
+        aria-label={`ผู้เข้าชมทั้งหมดที่กำลังออนไลน์ ${counts?.global ?? "-"}`}
      >
        <UsersIcon data-icon="inline-start" />
-        ทั้งหมด {counts?.global ?? "-"}
+        <span className="hidden sm:inline">ทั้งหมด</span> {counts?.global ?? "-"}
      </Badge>
      {guideId ? (
        <Badge
          variant="outline"
          className="tabular-nums"
          title="ผู้เข้าชม Guide นี้ที่กำลังออนไลน์"
+          aria-label={`ผู้เข้าชม Guide นี้ที่กำลังออนไลน์ ${counts?.guide ?? "-"}`}
        >
-          ไกด์นี้ {counts?.guide ?? "-"}
+          <span className="hidden sm:inline">ไกด์นี้</span>
+          <span aria-hidden="true" className="sm:hidden">G</span> {counts?.guide ?? "-"}
        </Badge>
      ) : null}
    </div>