The group labels sat 11px left of the icon column and rendered at the
same 13px as the nav items, so the groups read as indented blocks rather
than headings over a list.
The label used paddingLeft LAYOUT.LG (16px) while NavItem uses
theme.spacing(5) (10px); matching NavItem puts the label flush with the
icons. The eyebrow variant is 13px, so the size is overridden to
typographyLevels.s (11px) to sit below the item text. Top padding goes
from XS to SM for a little more separation above each group.
Measured in the browser: label and first icon both start at x=12, label
renders 11px against the items' 13px.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
The group wrapper was rendering as `<li>`, but the enclosing `List` is
`component="nav"` and so renders a `<nav>`, not a `<ul>`. That put list items
directly inside a nav — invalid HTML, and a screen reader announces orphaned
list items with no enclosing list or item count.
`NavItem` renders a `div` via `ListItemButton`, so there is no list structure
for the group wrapper to join. Makes it a plain `Box` and drops the
now-redundant `listStyle: "none"`.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
The sidebar listed twelve items in a flat column ordered roughly by when each
feature was added, so nothing signalled that Uptime, Pagespeed and
Infrastructure are the same kind of thing, or that Tags and Proxies are
configuration rather than views. Adding a new monitor type made this worse:
the natural place for a new entry is the end of the list, three rows below the
item it most resembles.
Groups the menu into Monitoring, Alerting, Reporting and Configuration.
`getMenu` now returns groups of items rather than a flat array; the sidebar
renders an eyebrow label per group.
When collapsed to 64px there is no room for a label, so the labels are
replaced by dividers between groups — the grouping survives as rhythm.
Settings moves from the middle of the list to the end of Configuration.
Adds four `components.sidebar.menu.groups.*` keys across all 19 locales.
Also corrects the i18n note in CLAUDE.md, which claimed translations are
managed through PoEditor.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
gorkem-bwl
Alexander Holliday
Gorkem Cetin
eralpozcan