feat: three-column mega-menu with Tabler icons and unified nav pills#76
Conversation
Redesign the desktop mega-menu as a centered three-column canvas and unify the navigation interaction language. - Layout: centered grid (anchor / submenu / device board); below lg the side columns drop so tablets get just the submenu column. - First-level icons mapped by LuCI node name (Tabler set), with a default fallback for unmapped sections. - Submenu fills the middle column top-to-bottom with content-width columns, growing rows not width; the panel scrolls only past viewport. - Unified pill hover/active across top triggers and submenu links in both mega-menu and boxed-dropdown modes; drop the old underline. - Mark the active submenu page so it gets the active pill. - Device board moves to the right column (cloned per panel), gains an i18n "Device" label, uses Tabler icons (router/cpu/package/tag), and wraps long values instead of truncating. - Global prefers-reduced-transparency fallback: drop backdrop blur and make the mega-menu background opaque. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
| Fixed max-width keeps every category the same width, so switching | ||
| is a pure cross-fade. Below lg the side tracks drop and only the | ||
| links column remains (tablet → just the submenu). */ | ||
| @apply pointer-events-none absolute inset-x-0 top-14 mx-auto grid max-w-[72rem] translate-y-1.5 grid-cols-[12rem_minmax(0,1fr)_13rem] gap-x-8 px-10 pt-7 pb-8 opacity-0 transition-[opacity,transform] duration-[250ms] ease-out max-lg:max-w-[44rem] max-lg:grid-cols-1 max-lg:px-8; |
There was a problem hiding this comment.
This panel is not bounded by the viewport and has no scrolling mechanism. Because .desktop-menu-container uses overflow-hidden, a tall submenu (or one enlarged by translation/font metrics) is clipped with no way to reach the hidden links, despite the PR promising that the panel scrolls once it exceeds the viewport. Please cap the panel/list against the available viewport height and add vertical overflow scrolling.
| E( | ||
| "a", | ||
| { | ||
| class: isActive ? "is-active-page" : "", |
There was a problem hiding this comment.
The current desktop submenu item gets the visual class but not aria-current="page". The shared sidebar/mobile renderer already sets that attribute, so mega-menu and boxed-dropdown users of assistive technology lose the current-page indication. Please add aria-current when isActive is true.
| --menu-icon is set per node name below; unmapped → default. */ | ||
| &::before { | ||
| @apply size-6 shrink-0 bg-current content-['']; | ||
| mask: var(--menu-icon, url("@assets/icons/category.svg")) center / contain no-repeat; |
There was a problem hiding this comment.
Repository CSS rules require declarations to be expressed through Tailwind @apply, and the review workflow explicitly flags raw CSS properties. Please express this mask through Tailwind arbitrary utilities (including the CSS-variable fallback) rather than adding a raw mask: declaration.
Code ReviewSummaryThis PR coherently implements the three-column mega-menu, active navigation pills, per-panel device board, and reduced-transparency fallback. The generated assets match the source, and both Issues Found
SuggestionsAdd focused tests for desktop submenu active-page semantics and for the mega-menu structure (board clone, row calculation, and responsive overflow behavior). |
1 participant
Summary
Redesign the desktop mega-menu as a centered three-column canvas and unify the navigation interaction language across both dropdown modes.
lgthe side columns drop so tablets get just the submenu column; belowmdit's the existing mobile drawer.name(Tabler set, stable & language-independent), with a default icon fallback for unmapped sections.--menu-rows; the panel only scrolls once it exceeds the viewport.isActivePath) so it gets the active pill, matching the top-level trigger.Devicelabel, uses Tabler icons (router / cpu / package / tag), and wraps long values instead of truncating.prefers-reduced-transparencyfallback — dropsbackdrop-filterblur and makes the mega-menu background opaque.Test plan
pnpm build✓pnpm test✓ (57/57)pnpm dev): hover/expand + cross-fade, board clone in the third column, 4-column fit for heavy categories (e.g. Network/Services), and tablet width showing only the submenu column.🤖 Generated with Claude Code