Blur Glide Menu

1"use client";2
3import { useEffect, useRef, useState } from "react";4import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";5import { Archive, ArrowLeft, ChevronDown, ChevronRight, Copy, FolderInput, Globe, Inbox, Layers, Palette, Tag, UserPlus } from "lucide-react";6import type { LucideIcon } from "lucide-react";7
8type MenuRow = {9  id: string;10  label: string;11  icon?: LucideIcon;12  initials?: string;13  tint?: string;14  dot?: string;15  hint?: string;16  panel?: MenuPanel;17};18
19type MenuPanel = { search?: string; rows: MenuRow[] };20
21const rootPanel: MenuPanel = {22  rows: [23    {24      id: "invite",25      label: "Invite people",26      icon: UserPlus,27      hint: "@",28      panel: {29        search: "Find people",30        rows: [31          { id: "priya", label: "Priya Raman", initials: "PR", tint: "#a8c7ff" },32          { id: "noah", label: "Noah Whitfield", initials: "NW", tint: "#ffd6a5" },33          { id: "ines", label: "Ines Duarte", initials: "ID", tint: "#b9f0d0" },34        ],35      },36    },37    {38      id: "move",39      label: "Move to",40      icon: FolderInput,41      hint: "M",42      panel: {43        search: "Find a space",44        rows: [45          {46            id: "roadmap",47            label: "Roadmap",48            icon: Layers,49            panel: {50              search: "Find a board",51              rows: [52                { id: "quarter", label: "Quarter planning", initials: "QP", tint: "#a8c7ff" },53                { id: "bets", label: "Platform bets", initials: "PB", tint: "#d9c2ff" },54                { id: "hiring", label: "Hiring plan", initials: "HP", tint: "#ffd6a5" },55                { id: "launch", label: "Launch checklist", initials: "LC", tint: "#b9f0d0" },56              ],57            },58          },59          {60            id: "system",61            label: "Design system",62            icon: Palette,63            panel: {64              search: "Find a board",65              rows: [66                { id: "tokens", label: "Colour tokens", initials: "CT", tint: "#ffc9d4" },67                { id: "specs", label: "Component specs", initials: "CS", tint: "#a8c7ff" },68                { id: "icons", label: "Icon set", initials: "IS", tint: "#b9f0d0" },69              ],70            },71          },72          { id: "site", label: "Marketing site", icon: Globe },73          { id: "support", label: "Support inbox", icon: Inbox },74        ],75      },76    },77    {78      id: "label",79      label: "Set label",80      icon: Tag,81      hint: "L",82      panel: {83        rows: [84          { id: "priority", label: "Priority", dot: "#ff9c9c" },85          { id: "blocked", label: "Blocked", dot: "#ffd6a5" },86          { id: "research", label: "Research", dot: "#a8c7ff" },87          { id: "shipped", label: "Shipped", dot: "#b9f0d0" },88        ],89      },90    },91    { id: "duplicate", label: "Duplicate", icon: Copy, hint: "⌘D" },92    { id: "archive", label: "Archive", icon: Archive },93  ],94};95
96const ROW_HEIGHT = 26;97const PANEL_MS = 420;98const CLOSE_MS = 240;99
100const panelKeyframes = `101@keyframes glide-menu-in {102  0% { opacity: 0; transform: translateX(100%); filter: blur(8px); }103  45% { opacity: .9; }104  65% { filter: blur(6.5px); }105  100% { opacity: 1; transform: translateX(0); filter: blur(0); }106}107@keyframes glide-menu-out {108  0% { opacity: 1; transform: translateX(0); filter: blur(0); }109  30% { opacity: .9; filter: blur(6px); }110  100% { opacity: 0; transform: translateX(-100%); filter: blur(9px); }111}112@keyframes glide-menu-in-back {113  0% { opacity: 0; transform: translateX(-100%); filter: blur(8px); }114  45% { opacity: .9; }115  65% { filter: blur(6.5px); }116  100% { opacity: 1; transform: translateX(0); filter: blur(0); }117}118@keyframes glide-menu-out-back {119  0% { opacity: 1; transform: translateX(0); filter: blur(0); }120  30% { opacity: .9; filter: blur(6px); }121  100% { opacity: 0; transform: translateX(100%); filter: blur(9px); }122}`;123
124const phaseClass = {125  idle: "",126  in: "[animation:glide-menu-in_.4s_cubic-bezier(.45,.05,.15,1)_both] motion-reduce:[animation-duration:.01ms]",127  "in-back": "[animation:glide-menu-in-back_.4s_cubic-bezier(.45,.05,.15,1)_both] motion-reduce:[animation-duration:.01ms]",128  out: "absolute inset-x-0 top-0 [animation:glide-menu-out_.4s_cubic-bezier(.45,.05,.15,1)_both] motion-reduce:animate-none motion-reduce:opacity-0",129  "out-back": "absolute inset-x-0 top-0 [animation:glide-menu-out-back_.4s_cubic-bezier(.45,.05,.15,1)_both] motion-reduce:animate-none motion-reduce:opacity-0",130};131
132function stepAt(trail: string[]) {133  let panel = rootPanel;134  let title = "";135  for (const id of trail) {136    const row = panel.rows.find((candidate) => candidate.id === id);137    if (!row?.panel) break;138    panel = row.panel;139    title = row.label;140  }141  return { panel, title };142}143
144function matches(panel: MenuPanel, query: string) {145  const term = query.trim().toLowerCase();146  return term ? panel.rows.filter((row) => row.label.toLowerCase().includes(term)) : panel.rows;147}148
149function MenuPanel({150  panel,151  title,152  phase,153  query,154  panelRef,155  searchRef,156  onQuery,157  onSelect,158  onBack,159}: {160  panel: MenuPanel;161  title: string;162  phase: keyof typeof phaseClass;163  query: string;164  panelRef?: RefObject<HTMLDivElement | null>;165  searchRef?: RefObject<HTMLInputElement | null>;166  onQuery?: (value: string) => void;167  onSelect?: (row: MenuRow) => void;168  onBack?: () => void;169}) {170  const [cursor, setCursor] = useState({ index: 0, visible: false });171  const rows = matches(panel, query);172  const leaving = phase === "out" || phase === "out-back";173
174  return (175    <div className={`w-full ${phaseClass[phase]}`} ref={panelRef} inert={leaving || undefined}>176      {title && (177        <>178          <div className="flex h-[26px] items-center gap-[5px] pr-[5px]">179            <button180              type="button"181              className="grid size-5 flex-none place-items-center rounded-[5px] border-0 bg-transparent text-[light-dark(#69727f,#868d97)] [transition:background-color_.18s_ease,color_.18s_ease] hover:bg-[light-dark(#e7eaef,#22262c)] hover:text-[light-dark(#262d38,#dfe2e5)] focus-visible:outline focus-visible:outline-[1.5px] focus-visible:outline-offset-0 focus-visible:outline-[#86b6ff] motion-reduce:[transition-duration:.01ms]"182              onClick={onBack}183              aria-label={`Back from ${title}`}184            >185              <ArrowLeft size={13} strokeWidth={1.8} aria-hidden="true" />186            </button>187            {panel.search ? (188              <input189                ref={searchRef}190                className="min-w-0 flex-1 truncate border-0 bg-transparent p-0 text-[11px] text-[light-dark(#262d38,#dfe2e5)] placeholder:text-[light-dark(#868f9c,#6d747e)] focus:outline-none focus-visible:outline-none"191                data-search=""192                type="text"193                value={query}194                placeholder={panel.search}195                aria-label={panel.search}196                onChange={(event) => onQuery?.(event.target.value)}197              />198            ) : (199              <span className="min-w-0 flex-1 truncate text-[11px] text-[light-dark(#262d38,#dfe2e5)]">{title}</span>200            )}201          </div>202          <div className="my-[3px] h-px bg-[light-dark(#e7eaef,#23262c)]" />203        </>204      )}205      <div206        className="relative"207        role="menu"208        onMouseLeave={() => setCursor((state) => ({ ...state, visible: false }))}209      >210        <span211          className={`pointer-events-none absolute inset-x-0 top-0 h-[26px] rounded-[5px] bg-[light-dark(#e7eaef,#22262c)] [transition:transform_.3s_cubic-bezier(.32,.72,0,1),opacity_.18s_ease] motion-reduce:[transition-duration:.01ms] ${cursor.visible ? "opacity-100" : "opacity-0"}`}212          style={{ transform: `translateY(${cursor.index * ROW_HEIGHT}px)` }}213          aria-hidden="true"214        />215        {rows.map((row, index) => (216          <button217            key={row.id}218            type="button"219            role="menuitem"220            className="group relative z-[1] flex h-[26px] w-full items-center gap-2 rounded-[5px] border-0 bg-transparent px-[7px] text-left text-[11px] text-[light-dark(#3b434f,#c6cbd2)] [transition:color_.18s_ease] hover:text-[light-dark(#14181e,#f4f5f7)] focus-visible:text-[light-dark(#14181e,#f4f5f7)] focus-visible:outline focus-visible:outline-[1.5px] focus-visible:outline-offset-[-1.5px] focus-visible:outline-[#86b6ff] motion-reduce:[transition-duration:.01ms]"221            data-row=""222            aria-haspopup={row.panel ? "menu" : undefined}223            onMouseEnter={() => setCursor({ index, visible: true })}224            onFocus={() => setCursor({ index, visible: true })}225            onClick={() => onSelect?.(row)}226            onKeyDown={(event) => {227              if (event.key === "ArrowRight" && row.panel) {228                event.preventDefault();229                onSelect?.(row);230              }231            }}232          >233            {row.icon && (234              <span className="grid size-[14px] flex-none place-items-center text-[light-dark(#69727f,#868d97)] [transition:color_.18s_ease] group-hover:text-[light-dark(#3b434f,#c6cbd2)] group-focus-visible:text-[light-dark(#3b434f,#c6cbd2)] motion-reduce:[transition-duration:.01ms]">235                <row.icon size={14} strokeWidth={1.7} aria-hidden="true" />236              </span>237            )}238            {row.initials && (239              <span240                className="grid size-[18px] flex-none place-items-center rounded-md text-[9px] font-semibold text-[light-dark(#ffffff,#15171a)]"241                style={{ background: row.tint }}242                aria-hidden="true"243              >244                {row.initials}245              </span>246            )}247            {row.dot && (248              <span249                className="mx-[3px] size-2 flex-none rounded-full"250                style={{ background: row.dot }}251                aria-hidden="true"252              />253            )}254            <span className="min-w-0 flex-1 truncate">{row.label}</span>255            {row.hint && (256              <span className="flex-none font-mono text-[10px] text-[light-dark(#868f9c,#6b727c)]">{row.hint}</span>257            )}258            {row.panel && (259              <ChevronRight260                className="flex-none text-[light-dark(#a2aab6,#5c636d)] [transition:transform_.24s_cubic-bezier(.32,.72,0,1),color_.18s_ease] group-hover:text-[light-dark(#69727f,#868d97)] group-hover:[transform:translateX(2px)] group-focus-visible:text-[light-dark(#69727f,#868d97)] group-focus-visible:[transform:translateX(2px)] motion-reduce:[transition-duration:.01ms]"261                size={13}262                strokeWidth={1.8}263                aria-hidden="true"264              />265            )}266          </button>267        ))}268        {!rows.length && (269          <p className="m-0 flex h-[26px] items-center px-[7px] text-[11px] text-[light-dark(#868f9c,#6d747e)]">No matches</p>270        )}271      </div>272    </div>273  );274}275
276export function BlurGlideMenu() {277  const [open, setOpen] = useState(true);278  const [nav, setNav] = useState<{ trail: string[]; direction: -1 | 0 | 1 }>({ trail: [], direction: 0 });279  const [query, setQuery] = useState("");280  const [leaving, setLeaving] = useState<{ trail: string[]; query: string; direction: -1 | 1 } | null>(null);281  const [height, setHeight] = useState<number>();282  const rootRef = useRef<HTMLDivElement>(null);283  const activeRef = useRef<HTMLDivElement>(null);284  const triggerRef = useRef<HTMLButtonElement>(null);285  const searchRef = useRef<HTMLInputElement>(null);286
287  const step = stepAt(nav.trail);288
289  useEffect(() => {290    if (activeRef.current) setHeight(activeRef.current.offsetHeight);291  }, [nav, query, open]);292
293  useEffect(() => {294    if (!leaving) return;295    const timer = setTimeout(() => setLeaving(null), PANEL_MS);296    return () => clearTimeout(timer);297  }, [leaving]);298
299  useEffect(() => {300    if (open) return;301    const timer = setTimeout(() => {302      setNav({ trail: [], direction: 0 });303      setQuery("");304      setLeaving(null);305    }, CLOSE_MS);306    return () => clearTimeout(timer);307  }, [open]);308
309  useEffect(() => {310    if (!open) return;311    const region = rootRef.current?.parentElement;312    if (!region) return;313    const handlePointerDown = (event: Event) => {314      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);315    };316    region.addEventListener("pointerdown", handlePointerDown);317    return () => region.removeEventListener("pointerdown", handlePointerDown);318  }, [open]);319
320  useEffect(() => {321    if (nav.direction === 0) return;322    const target = searchRef.current ?? activeRef.current?.querySelector<HTMLButtonElement>("[data-row]");323    target?.focus({ preventScroll: true });324  }, [nav]);325
326  const enter = (id: string) => {327    setLeaving({ trail: nav.trail, query, direction: 1 });328    setNav({ trail: [...nav.trail, id], direction: 1 });329    setQuery("");330  };331
332  const back = () => {333    if (!nav.trail.length) return;334    setLeaving({ trail: nav.trail, query, direction: -1 });335    setNav({ trail: nav.trail.slice(0, -1), direction: -1 });336    setQuery("");337  };338
339  const dismiss = () => {340    setOpen(false);341    triggerRef.current?.focus({ preventScroll: true });342  };343
344  const moveFocus = (delta: number) => {345    const rows = Array.from(activeRef.current?.querySelectorAll<HTMLButtonElement>("[data-row]") ?? []);346    if (!rows.length) return;347    const index = rows.indexOf(document.activeElement as HTMLButtonElement);348    const next = index < 0 ? (delta > 0 ? 0 : rows.length - 1) : (index + delta + rows.length) % rows.length;349    rows[next].focus({ preventScroll: true });350  };351
352  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {353    const inSearch = (event.target as HTMLElement).dataset.search !== undefined;354    if (event.key === "ArrowDown" || event.key === "ArrowUp") {355      event.preventDefault();356      if (!open) {357        setOpen(true);358        return;359      }360      moveFocus(event.key === "ArrowDown" ? 1 : -1);361      return;362    }363    if (!open) return;364    if (event.key === "Escape") {365      event.preventDefault();366      if (nav.trail.length) back();367      else dismiss();368      return;369    }370    if (event.key === "ArrowLeft" && !inSearch && nav.trail.length) {371      event.preventDefault();372      back();373    }374  };375
376  return (377    <div378      className="relative h-[182px] w-[214px] text-center text-[11px] text-[light-dark(#262d38,#dfe2e5)]"379      ref={rootRef}380      onKeyDown={handleKeyDown}381    >382      <style>{panelKeyframes}</style>383      <button384        type="button"385        className="inline-flex h-[26px] items-center gap-[7px] rounded-md border border-[light-dark(#dfe3ea,#2f333a)] bg-[light-dark(#ffffff,#16181c)] pl-[10px] pr-2 text-[11px] text-[light-dark(#262d38,#dfe2e5)] [transition:border-color_.2s_ease,background-color_.2s_ease] hover:border-[light-dark(#adb6c3,#3d434c)] hover:bg-[light-dark(#f0f2f5,#1b1e23)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#86b6ff] motion-reduce:[transition-duration:.01ms]"386        ref={triggerRef}387        aria-haspopup="menu"388        aria-expanded={open}389        onClick={() => (open ? dismiss() : setOpen(true))}390      >391        Board actions392        <ChevronDown393          className={`text-[light-dark(#69727f,#868d97)] [transition:transform_.34s_cubic-bezier(.32,.72,0,1)] motion-reduce:[transition-duration:.01ms] ${open ? "[transform:rotate(180deg)]" : ""}`}394          size={13}395          strokeWidth={1.8}396          aria-hidden="true"397        />398      </button>399      <div400        className={`absolute left-0 top-[33px] z-[1] w-full origin-top rounded-[9px] border border-[light-dark(#dfe3ea,#2b2f36)] bg-[light-dark(#ffffff,#121418)] p-[5px] text-left shadow-[inset_0_1px_0_rgba(255,255,255,.04),0_16px_34px_rgba(0,0,0,.45)] ${401          open402            ? "visible opacity-100 [filter:blur(0px)] [transform:none] [transition:opacity_.22s_ease,transform_.36s_cubic-bezier(.32,.72,0,1),filter_.28s_ease,visibility_0s]"403            : "invisible opacity-0 blur-[5px] [transform:translateY(-6px)_scale(.97)] [transition:opacity_.18s_ease,transform_.26s_cubic-bezier(.32,.72,0,1),filter_.22s_ease,visibility_0s_linear_.26s]"404        } motion-reduce:[transition-duration:.01ms]`}405      >406        <div407          className="relative overflow-hidden [transition:height_.4s_cubic-bezier(.45,.05,.15,1)] motion-reduce:[transition-duration:.01ms]"408          style={{ height }}409        >410          {leaving && (411            <MenuPanel412              key={leaving.trail.join("/") || "root"}413              {...stepAt(leaving.trail)}414              phase={leaving.direction === 1 ? "out" : "out-back"}415              query={leaving.query}416            />417          )}418          <MenuPanel419            key={nav.trail.join("/") || "root"}420            {...step}421            phase={nav.direction === 0 ? "idle" : nav.direction === 1 ? "in" : "in-back"}422            query={query}423            panelRef={activeRef}424            searchRef={step.panel.search ? searchRef : undefined}425            onQuery={setQuery}426            onBack={back}427            onSelect={(row) => (row.panel ? enter(row.id) : dismiss())}428          />429        </div>430      </div>431    </div>432  );433}