Menu bar: declutter top-level nav + drive desktop/mobile menus from one model #904

New Issue

2026-07-30T18:13:28Z

spikerj commented

2026-07-30 18:13:28 +00:00

The main menu bar has too many top-level items (up to 13 for a logged-in staff user: Learn, Games, Art Studio, Development, Calendar, Links, Sponsor, Contact, Hiring, Blog, Language, Management, user chip). At anything less than a maximized window the right-aligned nav row clips (`overflow: hidden`, the #159 safety net) and the leftmost items silently disappear under the SpikerSoft logo.

Plan (agreed in review):

1. Regroup the top level

Calendar → user menu (it is logged-in-only, personal content)
Language picker → user menu for logged-in users; anonymous users keep a compact flag-only button (preserves #185 visibility and the anonymous-locale-toggle e2e)
Links, Sponsor, Contact, Hiring, Blog → new single About dropdown
Result: Learn, Games, Art Studio, Development, About, Management (staff), flag (anon), user chip — fits at 1024px+.

2. Single menu model
The 2,013-line template defines every item twice (desktop mat-menus + mobile drawer) and has already drifted (Diff Editor exists on desktop, missing from the mobile drawer). Replace with a typed menu model (sections/items with visibility gates + badge ids) rendered by both a recursive dropdown component (desktop) and the drawer loop (mobile).

Also folds in: dead members (isHandset, isMobileOrTablet, guid, navigateHome, menu-bar.constants.ts), closeOtherMenus + 6 viewChild triggers (redundant with mat-menu backdrops), hand-rolled screen-reader announcer → CDK LiveAnnouncer, and removal of dead per-menu dropdown SCSS that never applied to overlay panels.

The main menu bar has too many top-level items (up to 13 for a logged-in staff user: Learn, Games, Art Studio, Development, Calendar, Links, Sponsor, Contact, Hiring, Blog, Language, Management, user chip). At anything less than a maximized window the right-aligned nav row clips (\`overflow: hidden\`, the #159 safety net) and the leftmost items silently disappear under the SpikerSoft logo. Plan (agreed in review): **1. Regroup the top level** - Calendar → user menu (it is logged-in-only, personal content) - Language picker → user menu for logged-in users; anonymous users keep a compact flag-only button (preserves #185 visibility and the anonymous-locale-toggle e2e) - Links, Sponsor, Contact, Hiring, Blog → new single **About** dropdown - Result: Learn, Games, Art Studio, Development, About, Management (staff), flag (anon), user chip — fits at 1024px+. **2. Single menu model** The 2,013-line template defines every item twice (desktop mat-menus + mobile drawer) and has already drifted (Diff Editor exists on desktop, missing from the mobile drawer). Replace with a typed menu model (sections/items with visibility gates + badge ids) rendered by both a recursive dropdown component (desktop) and the drawer loop (mobile). Also folds in: dead members (isHandset, isMobileOrTablet, guid, navigateHome, menu-bar.constants.ts), closeOtherMenus + 6 viewChild triggers (redundant with mat-menu backdrops), hand-rolled screen-reader announcer → CDK LiveAnnouncer, and removal of dead per-menu dropdown SCSS that never applied to overlay panels.

spikerj commented

2026-07-30 18:42:38 +00:00

Implementation up in spikersoft-angular PR #606 (refactor/menu-bar-declutter-904): top-level regrouped to Learn/Games/Art Studio/Development/About/Management + user chip, Calendar & language picker moved into the user menu (flag-only trigger stays for anonymous), both nav surfaces render from one typed menu model, logo ghost-letter overlap fixed, drawer takes over below 1280px. Verified with 18 unit tests + a 26-check live Playwright walk. Will close after merge.

spikerj referenced this issue

2026-08-03 20:48:59 +00:00

Art Studio admin pages render content under the fixed menu bar #907

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#904