Sidebar Floating

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { BarChart3, FileText, Home, Leaf, Menu, Plus, Truck, X, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarFloatingProps {
  brand?: string;
  groups?: { label: string; items: { label: string; href: string; icon: LucideIcon }[] }[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_GROUPS = [
  {
    label: "Measure",
    items: [
      { label: "Overview", href: "#overview", icon: Home },
      { label: "Footprint", href: "#footprint", icon: BarChart3 },
    ],
  },
  {
    label: "Act",
    items: [
      { label: "Actions", href: "#actions", icon: Leaf },
      { label: "Suppliers", href: "#suppliers", icon: Truck },
    ],
  },
  { label: "Share", items: [{ label: "Reports", href: "#reports", icon: FileText }] },
];

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Floating sidebar: a rounded cream panel inset from the page edges with a soft shadow, italic serif group labels, a sage “New entry” pill and sage-tinted active items; drawer on mobile. */
export function SidebarFloating({ brand = "Grove", groups = DEFAULT_GROUPS, activeHref = "#footprint", children, className }: SidebarFloatingProps) {
  const [open, setOpen] = useState(false);
  const id = useId();
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  return (
    <div className={cn("flex min-h-dvh bg-da-surface-2 text-da-fg lg:p-4", className)}>
      {open && <div aria-hidden className="fixed inset-0 z-40 bg-da-overlay lg:hidden" onClick={() => setOpen(false)} />}
      <aside
        id={id}
        aria-label="Sidebar"
        className={cn(
          "fixed inset-y-3 left-3 z-50 flex w-68 flex-col rounded-da-lg bg-da-surface p-5 text-da-surface-fg shadow-da-lg transition-transform duration-(--da-duration-slow) ease-da lg:sticky lg:top-4 lg:h-[calc(100dvh-2rem)] lg:translate-x-0 lg:shadow-da-md motion-reduce:transition-none",
          open ? "translate-x-0" : "-translate-x-[calc(100%+1rem)]",
        )}
      >
        <div className="flex items-center gap-2.5 px-1 font-da-display text-2xl">
          <GroveMark />
          {brand}
          <button
            type="button"
            aria-label="Close menu"
            onClick={() => setOpen(false)}
            className="da-focus ml-auto grid size-9 place-items-center rounded-full hover:bg-da-surface-2 lg:hidden"
          >
            <X aria-hidden className="size-4" />
          </button>
        </div>
        <button
          type="button"
          className="da-focus da-transition mt-6 inline-flex h-11 items-center justify-center gap-2 rounded-da-pill bg-da-primary font-medium text-da-primary-fg hover:bg-da-primary/90"
        >
          <Plus aria-hidden className="size-4" /> New entry
        </button>
        <nav aria-label="Main" className="mt-6 flex-1 overflow-y-auto">
          {groups.map((g) => (
            <div key={g.label} className="mb-5">
              <p className="mb-1 px-3 font-da-display text-sm text-da-muted-fg italic">{g.label}</p>
              <ul className="space-y-0.5">
                {g.items.map((it) => {
                  const on = it.href === activeHref;
                  return (
                    <li key={it.href}>
                      <a
                        href={it.href}
                        aria-current={on ? "page" : undefined}
                        className={cn(
                          "da-focus da-transition flex h-11 items-center gap-3 rounded-da-md px-3 text-[15px]",
                          on ? "bg-da-accent text-da-accent-fg" : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
                        )}
                      >
                        <it.icon aria-hidden className="size-5" />
                        {it.label}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </nav>
        <div className="flex items-center gap-3 rounded-da-md bg-da-surface-2 p-3 text-sm">
          <span aria-hidden className="grid size-9 place-items-center rounded-full bg-da-secondary font-da-display text-da-secondary-fg">
            L
          </span>
          <span>
            <span className="block font-medium">Léa Martin</span>
            <span className="block text-da-muted-fg">Atelier Nord</span>
          </span>
        </div>
      </aside>
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex h-16 items-center gap-3 px-4 lg:hidden">
          <button
            type="button"
            aria-label="Open menu"
            aria-expanded={open}
            aria-controls={id}
            onClick={() => setOpen(true)}
            className="da-focus grid size-11 place-items-center rounded-full bg-da-surface shadow-da-sm"
          >
            <Menu aria-hidden className="size-5" />
          </button>
          <span className="font-da-display text-xl">{brand}</span>
        </div>
        <main className="flex-1">{children}</main>
      </div>
    </div>
  );
}

export default SidebarFloating;