helios-evcs/apps/web/components/sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import {
  CreditCard,
  Gear,
  ListCheck,
  Person,
  PlugConnection,
  Thunderbolt,
  Xmark,
  Bars,
} from "@gravity-ui/icons";
import SidebarFooter from "@/components/sidebar-footer";
import { useSession } from "@/lib/auth-client";

const navItems = [
  { href: "/dashboard", label: "概览", icon: Thunderbolt, exact: true, adminOnly: false },
  { href: "/dashboard/charge-points", label: "充电桩", icon: PlugConnection, adminOnly: false },
  { href: "/dashboard/transactions", label: "充电记录", icon: ListCheck, adminOnly: false },
  { href: "/dashboard/id-tags", label: "储值卡", icon: CreditCard, adminOnly: false },
  { href: "/dashboard/users", label: "用户管理", icon: Person, adminOnly: true },
];

const settingsItems = [{ href: "/dashboard/settings", label: "账号设置", icon: Gear }];

function NavContent({
  pathname,
  isAdmin,
  onNavigate,
}: {
  pathname: string;
  isAdmin: boolean;
  onNavigate?: () => void;
}) {
  return (
    <>
      {/* Logo */}
      <div className="flex h-14 shrink-0 items-center gap-2.5 border-b border-border px-5">
        <div className="flex size-7 items-center justify-center rounded-lg bg-accent">
          <Thunderbolt className="size-4 text-accent-foreground" />
        </div>
        <div>
          <span className="text-sm font-semibold tracking-tight text-foreground">Helios EVCS</span>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
        <p className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
          管理
        </p>
        {navItems
          .filter((item) => !item.adminOnly || isAdmin)
          .map((item) => {
            const isActive = item.exact
              ? pathname === item.href
              : pathname === item.href || pathname.startsWith(item.href + "/");
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={onNavigate}
                className={[
                  "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  isActive
                    ? "bg-accent/10 text-accent"
                    : "text-muted hover:bg-surface-tertiary hover:text-foreground",
                ].join(" ")}
              >
                <Icon className="size-4 shrink-0" />
                <span>{item.label}</span>
                {isActive && <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />}
              </Link>
            );
          })}
        <p className="mb-1 mt-3 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
          设置
        </p>
        {settingsItems.map((item) => {
          const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              onClick={onNavigate}
              className={[
                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                isActive
                  ? "bg-accent/10 text-accent"
                  : "text-muted hover:bg-surface-tertiary hover:text-foreground",
              ].join(" ")}
            >
              <Icon className="size-4 shrink-0" />
              <span>{item.label}</span>
              {isActive && <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />}
            </Link>
          );
        })}
      </nav>

      {/* Footer */}
      <SidebarFooter />
    </>
  );
}

export default function Sidebar() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const { data: sessionData } = useSession();
  const isAdmin = sessionData?.user?.role === "admin";

  return (
    <>
      {/* Mobile top bar */}
      <div className="fixed inset-x-0 top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-surface-secondary px-4 lg:hidden">
        <button
          type="button"
          className="flex size-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
          onClick={() => setOpen(true)}
          aria-label="打开菜单"
        >
          <Bars className="size-5" />
        </button>
        <div className="flex items-center gap-2">
          <div className="flex size-6 items-center justify-center rounded-md bg-accent">
            <Thunderbolt className="size-3.5 text-accent-foreground" />
          </div>
          <span className="text-sm font-semibold">Helios EVCS</span>
        </div>
      </div>

      {/* Mobile drawer overlay */}
      {open && (
        <div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setOpen(false)} />
      )}

      {/* Mobile drawer */}
      <aside
        className={[
          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-border bg-surface-secondary transition-transform duration-300 lg:hidden",
          open ? "translate-x-0" : "-translate-x-full",
        ].join(" ")}
      >
        <button
          type="button"
          className="absolute right-3 top-3 flex size-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
          onClick={() => setOpen(false)}
          aria-label="关闭菜单"
        >
          <Xmark className="size-4" />
        </button>
        <NavContent pathname={pathname} isAdmin={isAdmin} onNavigate={() => setOpen(false)} />
      </aside>

      {/* Desktop sidebar */}
      <aside className="hidden w-60 shrink-0 flex-col border-r border-border bg-surface-secondary lg:flex">
        <NavContent pathname={pathname} isAdmin={isAdmin} />
      </aside>
    </>
  );
}