Dock

---
/**
 * Dock — a row of icons that swell under the pointer, the neighbours with
 * them, zero JS.
 *
 * Every item's size is one custom property; :has() sets it on the hovered
 * (or keyboard-focused) item, on the two beside it and the two beyond, in
 * three steps from the `magnify` prop, and the width and height transition
 * on the preset curve — so the tiles push each other apart the way a real
 * dock does rather than scaling over one another. The row is a fixed
 * height and the growth goes up. Labels are tooltips above the item, no
 * popover needed. Touch gets a plain row of links.
 */
import type { HTMLAttributes } from 'astro/types';

interface Item {
  href: string;
  label: string;
  /** Inline SVG (or any HTML) for the tile; default: the label's first letter. */
  icon?: string;
  /** Marks the current page (aria-current + a dot). */
  current?: boolean;
}

interface Props extends HTMLAttributes<'nav'> {
  items: Item[];
  /** Tile size in px. */
  size?: number;
  /** Growth of the hovered tile, as a multiple of size; the neighbours get 60 % and 25 % of the growth. */
  magnify?: number;
  /** Pin to the bottom centre of the viewport. */
  fixed?: boolean;
  /** Accessible name of the nav. */
  label?: string;
}

const { items, size = 44, magnify = 1.6, fixed = false, label = 'Dock', class: className, style, ...rest } = Astro.props;
const inline = [`--ma-dock-size:${size}px`, `--ma-dock-magnify:${magnify}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
const glyph = (l: string) => `<b>${l.trim().charAt(0).toUpperCase()}</b>`;
---

<nav class:list={['ma-dock', className]} data-fixed={fixed ? '' : undefined} aria-label={label} style={inline} {...rest}>
  <ul class="ma-dock__list">
    {
      items.map((it) => (
        <li class="ma-dock__item">
          <a href={it.href} class="ma-dock__link" aria-label={it.label} aria-current={it.current ? 'page' : undefined}>
            <span class="ma-dock__icon" aria-hidden="true" set:html={it.icon ?? glyph(it.label)} />
            <span class="ma-dock__label" aria-hidden="true">{it.label}</span>
          </a>
        </li>
      ))
    }
  </ul>
</nav>

<style is:global>
  @layer components {
    :where(.ma-dock) {
      /* the magnification the rules read; reduced motion sets it to 1 */
      --ma-dock-m: var(--ma-dock-magnify, 1.6);
      display: inline-flex;
      padding: 0.375rem;
      border: 1px solid var(--ma-edge);
      border-radius: 1.25rem;
      background: var(--ma-panel);
      backdrop-filter: blur(16px);
      box-shadow: 0 16px 40px -20px rgb(0 0 0 / 0.45);
    }
    :where(.ma-dock[data-fixed]) {
      position: fixed;
      bottom: 1rem;
      left: 50%;
      z-index: 40;
      translate: -50% 0;
    }
    :where(.ma-dock__list) {
      display: flex;
      align-items: flex-end;
      gap: 0.375rem;
      height: var(--ma-dock-size, 44px);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    /* every tile's size is one number; the hover rules below set it */
    :where(.ma-dock__item) {
      --ma-dock-k: 1;
      position: relative;
      flex: none;
      width: calc(var(--ma-dock-size, 44px) * var(--ma-dock-k));
      height: calc(var(--ma-dock-size, 44px) * var(--ma-dock-k));
      transition:
        width var(--ma-duration) var(--ma-ease),
        height var(--ma-duration) var(--ma-ease);
    }
    :where(.ma-dock__link) {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      border: 1px solid var(--ma-edge);
      border-radius: 28%;
      background: color-mix(in srgb, var(--ma-ink) 6%, transparent);
      color: inherit;
      text-decoration: none;
      transition: background-color var(--ma-duration-fast) var(--ma-ease-out);
    }
    :where(.ma-dock__link:hover) {
      background: color-mix(in srgb, var(--ma-ink) 11%, transparent);
    }
    :where(.ma-dock__link:focus-visible) {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }
    :where(.ma-dock__link[aria-current='page'])::after {
      content: '';
      position: absolute;
      bottom: -0.35rem;
      left: 50%;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: currentColor;
      translate: -50% 0;
    }
    :where(.ma-dock__icon) {
      display: grid;
      place-items: center;
      width: 56%;
      height: 56%;
      font-weight: 600;
      font-size: calc(var(--ma-dock-size, 44px) * 0.38 * var(--ma-dock-k));
      line-height: 1;
    }
    :where(.ma-dock__icon svg) {
      width: 100%;
      height: 100%;
    }
    /* the label: a tooltip above, arriving from a few px below on the hover travel */
    :where(.ma-dock__label) {
      position: absolute;
      bottom: calc(100% + 0.5rem);
      left: 50%;
      padding: 0.3em 0.65em;
      border-radius: 0.375rem;
      background: var(--ma-ink);
      color: var(--ma-panel);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.2;
      white-space: nowrap;
      opacity: 0;
      translate: -50% var(--ma-travel-hover, 4px);
      pointer-events: none;
      transition:
        opacity var(--ma-duration-fast) var(--ma-ease-out),
        translate var(--ma-duration) var(--ma-ease);
    }
    @media (hover: hover) {
      /* the hovered tile, its two neighbours, and the two beyond — three sizes from one number */
      :where(.ma-dock__item:is(:hover, :has(:focus-visible))) {
        --ma-dock-k: var(--ma-dock-m);
      }
      :where(.ma-dock__item:has(+ .ma-dock__item:is(:hover, :has(:focus-visible)))),
      :where(.ma-dock__item:is(:hover, :has(:focus-visible)) + .ma-dock__item) {
        --ma-dock-k: calc(1 + (var(--ma-dock-m) - 1) * 0.6);
      }
      :where(.ma-dock__item:has(+ .ma-dock__item + .ma-dock__item:is(:hover, :has(:focus-visible)))),
      :where(.ma-dock__item:is(:hover, :has(:focus-visible)) + .ma-dock__item + .ma-dock__item) {
        --ma-dock-k: calc(1 + (var(--ma-dock-m) - 1) * 0.25);
      }
      :where(.ma-dock__item:is(:hover, :has(:focus-visible)) .ma-dock__label) {
        opacity: 1;
        translate: -50% 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-dock) {
        --ma-dock-m: 1;
      }
      :where(.ma-dock__item),
      :where(.ma-dock__label) {
        transition: none;
        translate: -50% 0;
      }
      :where(.ma-dock__item) {
        translate: none;
      }
    }
  }
</style>