Sidebar

import { useState, type ReactNode } from 'react';
import { MotionConfig, motion } from 'motion/react';
import { Tooltip } from '@base-ui/react/tooltip';

type NavItem = { href: string; label: string; icon: ReactNode };
type Props = { items: NavItem[]; currentPath: string };

export function Sidebar({ items, currentPath }: Props) {
  const [collapsed, setCollapsed] = useState(
    () => localStorage.getItem('sidebar') === 'collapsed'
  );

  function toggle() {
    setCollapsed(!collapsed);
    localStorage.setItem('sidebar', collapsed ? 'expanded' : 'collapsed');
  }

  // `layout` animates the width change with transforms, so the page
  // isn't laid out again on every frame.
  return (
    <MotionConfig transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}>
      <motion.nav
        layout
        aria-label='Main'
        className={`flex h-dvh flex-col gap-1 border-r bg-muted p-3 ${collapsed ? 'w-16' : 'w-60'}`}
      >
        <motion.button
          layout='position'
          type='button'
          onClick={toggle}
          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          className='mb-2 size-10 self-end rounded-lg text-muted-foreground hover:bg-background'
        >
          {collapsed ? '»' : '«'}
        </motion.button>
        {items.map((item) => (
          <Tooltip.Root key={item.href} disabled={!collapsed}>
            <Tooltip.Trigger
              render={<motion.a layout='position' href={item.href} />}
              aria-current={item.href === currentPath ? 'page' : undefined}
              className='flex h-10 items-center gap-3 rounded-lg px-3 text-sm text-muted-foreground hover:bg-background aria-[current=page]:bg-background aria-[current=page]:font-medium aria-[current=page]:text-foreground'
            >
              <span className='size-4 shrink-0'>{item.icon}</span>
              <span className={collapsed ? 'sr-only' : 'truncate'}>
                {item.label}
              </span>
            </Tooltip.Trigger>
            <Tooltip.Portal>
              <Tooltip.Positioner side='right' sideOffset={12}>
                <Tooltip.Popup className='rounded-md bg-foreground px-2 py-1 text-xs text-background'>
                  {item.label}
                </Tooltip.Popup>
              </Tooltip.Positioner>
            </Tooltip.Portal>
          </Tooltip.Root>
        ))}
      </motion.nav>
    </MotionConfig>
  );
}