menu design for web app navigation #122

New Issue

2026-10-04T23:01:25+02:00

adam commented

2026-10-04 23:01:25 +02:00

Given the current design and pages and sub pages in the web app, how would you design a medu structure? Maybe a slim header that contains all pages links and collapses into a hamburger menu for mobile?

The layout currently shows only the site title and optional federation instance selector without navigation, so users can’t jump between key views (Dashboard, Map, Chat, Charts, Federation, Nodes).

Introduce a slim top header with a horizontal nav list for desktop that links to / (Dashboard), /map, /chat, /charts, conditional /federation (only when enabled), and a “Nodes” list section anchor or /nodes/:id entry point. Keep the existing title and federation selector aligned left; position nav items to the right with a clear active state driven by current_view_mode. Add an “Info” icon/button adjacent to the theme toggle for consistency.

For mobile, replace the nav list with a hamburger button that opens an accessible slide-in menu containing the same links plus the theme toggle and refresh controls. Ensure focus trapping inside the menu, aria-expanded state on the trigger, and close-on-route-change behavior. Keep header height minimal (~56px) so the map and tables retain vertical space, matching the app’s data-first layout.

Provide quick shortcuts to major in-page sections: a “Nodes table” anchor on the dashboard and a “Go to map” link on the charts page for context switching without scrolling. Reuse existing .controls styling for consistent spacing and ensure the nav is keyboard-navigable with visible focus rings.

Given the current design and pages and sub pages in the web app, how would you design a medu structure? Maybe a slim header that contains all pages links and collapses into a hamburger menu for mobile? The layout currently shows only the site title and optional federation instance selector without navigation, so users can’t jump between key views (Dashboard, Map, Chat, Charts, Federation, Nodes). Introduce a slim top header with a horizontal nav list for desktop that links to / (Dashboard), /map, /chat, /charts, conditional /federation (only when enabled), and a “Nodes” list section anchor or /nodes/:id entry point. Keep the existing title and federation selector aligned left; position nav items to the right with a clear active state driven by current_view_mode. Add an “Info” icon/button adjacent to the theme toggle for consistency. For mobile, replace the nav list with a hamburger button that opens an accessible slide-in menu containing the same links plus the theme toggle and refresh controls. Ensure focus trapping inside the menu, aria-expanded state on the trigger, and close-on-route-change behavior. Keep header height minimal (~56px) so the map and tables retain vertical space, matching the app’s data-first layout. Provide quick shortcuts to major in-page sections: a “Nodes table” anchor on the dashboard and a “Go to map” link on the charts page for context switching without scrolling. Reuse existing .controls styling for consistent spacing and ensure the nav is keyboard-navigable with visible focus rings.

adam closed this issue

2026-10-04 23:01:25 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/potato-mesh#122