lab/ts/web/nextjs/polaris/src/features/navigation/components/sidebar.tsx

import { Home, PanelLeftClose, PanelLeftOpen } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { CategoryIcon } from "@/features/navigation/components/category-icon"
import { cn } from "@/lib/utils"
import type { Category } from "@/types/navigation"

type SidebarProps = {
  categories: Category[]
  siteName: string
  collapsed: boolean
  activeCategoryId?: string
  onToggle: () => void
}

export function Sidebar({
  categories,
  siteName,
  collapsed,
  activeCategoryId,
  onToggle,
}: SidebarProps) {
  const ToggleIcon = collapsed ? PanelLeftOpen : PanelLeftClose
  const toggleLabel = collapsed ? "展开侧边栏" : "折叠侧边栏"
  const homeIsActive = activeCategoryId === undefined

  return (
    <TooltipProvider>
      <aside className="sidebar" aria-label="主导航">
        <div className="sidebar__header">
          <Link
            className="sidebar__brand"
            href="/"
            aria-label={`${siteName} 首页`}
          >
            <Image
              src="/brand/logo.svg"
              alt=""
              width={40}
              height={40}
              priority
            />
            <span className={cn("sidebar__site-name", collapsed && "sr-only")}>
              {siteName}
            </span>
          </Link>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            aria-label={toggleLabel}
            onClick={onToggle}
          >
            <ToggleIcon aria-hidden="true" />
          </Button>
        </div>

        <nav className="sidebar__nav" aria-label="站点导航">
          <Link
            className={cn(
              "sidebar__nav-item",
              homeIsActive && "sidebar__nav-item--active",
            )}
            href="/"
            aria-current={homeIsActive ? "page" : undefined}
          >
            <Home aria-hidden="true" />
            <span className={cn("sidebar__label", collapsed && "sr-only")}>
              首页
            </span>
          </Link>

          <div className="sidebar__categories">
            {categories.map((category) => {
              const isActive = category.id === activeCategoryId

              return (
                <Tooltip key={category.id}>
                  <TooltipTrigger asChild>
                    <Link
                      className={cn(
                        "sidebar__nav-item",
                        isActive && "sidebar__nav-item--active",
                      )}
                      href={`/categories/${category.id}`}
                      aria-current={isActive ? "page" : undefined}
                    >
                      <CategoryIcon name={category.icon} />
                      <span
                        className={cn("sidebar__label", collapsed && "sr-only")}
                      >
                        {category.title}
                      </span>
                    </Link>
                  </TooltipTrigger>
                  <TooltipContent side="right">{category.title}</TooltipContent>
                </Tooltip>
              )
            })}
          </div>
        </nav>
      </aside>
    </TooltipProvider>
  )
}