feat(nav): primary nav visual rework — icons, sentence-case, bottom-border active state #580

New issue

Closed

opened 2026-04-30 18:50:46 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-04-30 18:50:46 +00:00

Collaborator

User story

As an operator, I want the primary nav to be scannable at a glance, match the iconography conventions on Board / Workspace pages, and make the active route obvious without squinting at a faint background tint.

Acceptance criteria

Each NAV_ITEMS entry gains a lucide icon: LayoutGrid (Board), MessageSquare (Workspace), Bot (Agents), GitBranch (Flows), Settings (Settings). Icons are 16 px, paired with the label.
Drop the uppercase tracking-[0.5px] styling on the desktop nav and the drawer entries; render Board / Workspace etc. in sentence case at text-small font-semibold.
Active route is signalled by border-b-2 border-accent at the bottom of the nav item plus text-text-primary. Drop the bg-surface fill so non-active and active items have a consistent visual weight.
Inactive items use text-text-muted and gain text-text-primary on hover (no fill).
The mobile drawer mirrors the icons; entries become flex items-center gap-3 rows so the icon precedes the label.
Reduced-motion: no transition on the bottom-border swap.

Out of scope

Nav reordering.
A "More" menu.

References

Source: apps/web/src/components/app-shell.tsx:65 (NAV_ITEMS).
Spec: specs/topbar-nav-overhaul.md § P1.
Audit context: § Desktop topbar items 2 + 3.

## User story As an operator, I want the primary nav to be scannable at a glance, match the iconography conventions on Board / Workspace pages, and make the active route obvious without squinting at a faint background tint. ## Acceptance criteria - [ ] Each `NAV_ITEMS` entry gains a lucide icon: `LayoutGrid` (Board), `MessageSquare` (Workspace), `Bot` (Agents), `GitBranch` (Flows), `Settings` (Settings). Icons are 16 px, paired with the label. - [ ] Drop the `uppercase tracking-[0.5px]` styling on the desktop nav and the drawer entries; render `Board` / `Workspace` etc. in sentence case at `text-small font-semibold`. - [ ] Active route is signalled by `border-b-2 border-accent` at the bottom of the nav item plus `text-text-primary`. Drop the `bg-surface` fill so non-active and active items have a consistent visual weight. - [ ] Inactive items use `text-text-muted` and gain `text-text-primary` on hover (no fill). - [ ] The mobile drawer mirrors the icons; entries become `flex items-center gap-3` rows so the icon precedes the label. - [ ] Reduced-motion: no transition on the bottom-border swap. ## Out of scope - Nav reordering. - A "More" menu. ## References - Source: `apps/web/src/components/app-shell.tsx:65` (`NAV_ITEMS`). - Spec: `specs/topbar-nav-overhaul.md` § P1. - Audit context: § Desktop topbar items 2 + 3.

claude-desktop added the

area:dashboard

type:user-story

labels

2026-04-30 18:51:17 +00:00

claude-desktop added a new dependency

2026-04-30 18:51:22 +00:00

#570 feat(workspace): ⌘K command palette + ? keyboard help overlay

claude-desktop added a new dependency

2026-04-30 18:51:22 +00:00

#581 feat(nav): topbar utility cluster — avatar menu, notifications bell, ⌘K stub, repo + conn polish

claude-desktop added a new dependency