Jank

import { useState } from 'react';

export function ProjectSidebar({ projects }: { projects: string[] }) {
  const [open, setOpen] = useState(false);
  const [settled, setSettled] = useState(false);
  const [query, setQuery] = useState('');
  // Filter only once the panel has stopped moving.
  const visible = settled
    ? projects.filter((name) =>
        name.toLowerCase().includes(query.toLowerCase())
      )
    : [];

  function toggle() {
    if (!open) setSettled(false);
    setOpen(!open);
  }

  return (
    <>
      <button
        type='button'
        aria-expanded={open}
        onClick={toggle}
        className='rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted'
      >
        Projects
      </button>
      <aside
        inert={!open}
        // translate and opacity skip layout on every frame; width or left would not.
        className={`fixed inset-y-0 left-0 flex w-72 flex-col gap-3 border-r bg-background p-4 transition-[translate,opacity] duration-250 ease-[cubic-bezier(0.23,1,0.32,1)] ${open ? '' : '-translate-x-full opacity-0'}`}
        // Heavy work waits for the slide to finish, so it can't steal frames from it.
        onTransitionEnd={(event) => {
          if (event.propertyName === 'translate') setSettled(open);
        }}
      >
        <input
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder='Filter projects'
          className='rounded-md border bg-background px-3 py-2 text-sm'
        />
        {settled ? (
          <ul className='overflow-y-auto text-sm'>
            {visible.map((name) => (
              <li key={name} className='rounded-md px-3 py-2 hover:bg-muted'>
                {name}
              </li>
            ))}
          </ul>
        ) : (
          <p className='text-sm text-muted-foreground'>Loading projects…</p>
        )}
      </aside>
    </>
  );
}