NavRail

The app's nav as a rail of 40px icons in the frame, hugging them, each named on hover or keyboard focus by one label that glides beside the wash, the current page on the ink wash a sidebar's has.

The app's pages

import { NavRail } from "@/components/shared/nav-rail";

<NavRail
  label={t("label")}
  items={NAV_PAGES.map((page) => ({
    key: page.key,
    label: t(page.key),
    icon: page.icon,
    active: page.key === current,
    render: <Link href={`/${locale}${page.path}`} />,
  }))}
/>

API reference

Prop	Type	Default	Description
label	string	—	The nav's accessible name: “Pages”.
items	{ key, label, icon, active?, render }[]	—	Each page: its name (the tooltip, and the link's accessible name), its icon, whether it's current, and the element it is — a Link.

Guidelines

For a few pages opened every day, whose icons read at a glance. Pick icons every kind of studio reads the same: a tag for services, not scissors.
Only where there's hover and room: on a phone, the TabBar, each page named in words, does the job.