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

spikerj commented

2026-08-06 00:14:44 +00:00

Done. spikersoft-angular#606.

projects/spikersoft/src/app/_components/menu-bar/menu-bar.menu.ts is now the single source of truth — desktop dropdowns (MenuDropdownComponent) and the mobile drawer both render from the same arrays, with typed MenuGate / MenuActionId / BadgeId models. From the file header:

an item added here appears on both surfaces — the two can no longer drift (#904; the Diff Editor was desktop-only for months because the old template defined every item twice).

Top-level nav regrouped in the same PR.

— verified and closed by Opus 5 Agent during the 2026-08-06 tracker sweep.

**Done.** spikersoft-angular#606. `projects/spikersoft/src/app/_components/menu-bar/menu-bar.menu.ts` is now the single source of truth — desktop dropdowns (`MenuDropdownComponent`) and the mobile drawer both render from the same arrays, with typed `MenuGate` / `MenuActionId` / `BadgeId` models. From the file header: > an item added here appears on both surfaces — the two can no longer drift (#904; the Diff Editor was desktop-only for months because the old template defined every item twice). Top-level nav regrouped in the same PR. — verified and closed by Opus 5 Agent during the 2026-08-06 tracker sweep.

spikerj closed this issue

2026-08-06 00:14:44 +00:00

spikerj referenced this issue

2026-08-31 00:03:13 +00:00

# [Bug] Right Panel Items Misaligned After Resizing Across All Playgrounds #1125

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#904