muse/web/components/shell/sidebar.tsx

"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { Music2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { href, type Nav, type Tab } from "@/lib/nav";
import { useMotionOK, spring } from "@/lib/motion";
import { NAV } from "./nav-items";

/**
 * Sidebar navigation, the pattern Apple uses in Music, Mail, Finder and
 * Settings. It replaces a horizontally scrolling row of pills, which is a
 * mobile-web affordance that had been left on the desktop layout too.
 *
 * Collapses to a 68px icon rail between 768 and 1024, where a 240px sidebar
 * would eat a third of the window.
 */
export function Sidebar({
  nav,
  go,
  badges,
  rail,
  visible,
}: {
  nav: Nav;
  go: (n: Nav) => void;
  badges: Partial<Record<Tab, number>>;
  rail: boolean;
  visible: (t: Tab) => boolean;
}) {
  const ok = useMotionOK();
  const groups = ["Library", "Activity", "Manage"] as const;

  return (
    <nav
      aria-label="Sections"
      className={cn(
        "material sticky top-0 hidden h-dvh shrink-0 flex-col gap-1 border-r border-edge",
        "md:flex",
        rail ? "w-[var(--rail-w)] items-center px-2 py-3" : "w-[var(--sidebar-w)] px-3 py-3",
      )}
    >
      <div className={cn("mb-4 flex items-center gap-2.5", rail ? "justify-center" : "px-2")}>
        <span className="grid h-8 w-8 shrink-0 place-items-center rounded-card bg-accent text-[var(--accent-ink)]">
          <Music2 className="h-4 w-4" />
        </span>
        {!rail && <span className="text-headline tracking-tight">muse</span>}
      </div>

      {groups.map((g) => {
        const items = NAV.filter((n) => n.group === g && visible(n.tab));
        if (!items.length) return null;
        return (
          <div key={g} className="mb-2 w-full">
            {!rail && (
              <h2 className="mb-1 px-2 text-caption font-semibold uppercase tracking-[0.06em] text-mute">
                {g}
              </h2>
            )}
            <ul className="flex flex-col gap-0.5">
              {items.map(({ tab, label, icon: Icon }) => {
                const on = nav.tab === tab;
                const badge = badges[tab] ?? 0;
                return (
                  <li key={tab}>
                    <a
                      href={href({ tab })}
                      aria-current={on ? "page" : undefined}
                      title={rail ? label : undefined}
                      onClick={(e) => {
                        // Left-click navigates in place; cmd/ctrl-click still
                        // opens a real new tab, because these are real links.
                        if (e.metaKey || e.ctrlKey || e.shiftKey) return;
                        e.preventDefault();
                        go({ tab });
                      }}
                      className={cn(
                        "focus-ring relative flex items-center rounded-control text-callout",
                        "font-medium transition-colors duration-150",
                        rail ? "h-9 w-9 justify-center" : "gap-2.5 px-2 py-1.5",
                        on ? "text-ink" : "text-dim hover:bg-[var(--faint)] hover:text-ink",
                      )}
                    >
                      {on && (
                        <motion.span
                          layoutId="nav-selection"
                          transition={ok ? spring : { duration: 0 }}
                          className="absolute inset-0 rounded-control bg-[var(--surface-3)]"
                        />
                      )}
                      <Icon className="relative h-4 w-4 shrink-0" />
                      {!rail && <span className="relative flex-1 clamp1">{label}</span>}
                      {badge > 0 && (
                        <span
                          className={cn(
                            "shrink-0 rounded-pill text-caption font-bold nums",
                            rail
                              ? "absolute -right-1 -top-1 h-4 min-w-4 px-1 text-center leading-4"
                              : "relative px-1.5",
                            tab === "review"
                              ? "bg-warn/20 text-warn"
                              : "bg-accent-soft text-accent",
                          )}
                        >
                          {badge}
                        </span>
                      )}
                    </a>
                  </li>
                );
              })}
            </ul>
          </div>
        );
      })}
    </nav>
  );
}