feat(nav): PROG-79 replace overflowing mobile top nav with a bottom tab bar#44
Merged
Conversation
…ab bar On a phone the header packed the logo, six text nav links, the New menu, and the avatar into one row, which overflowed and scrolled sideways. Swap the navigation pattern on small screens rather than dropping destinations. - Below `sm`, hide the header's inline nav and show a fixed bottom tab bar (MobileTabBar): Board · Outline · Agenda · Search as tabs, with a More tab whose sheet holds Structure · Archive (the iOS 5-slot pattern). At `sm`+ the bar is hidden and the inline nav returns unchanged. The mobile header is now just logo + New + avatar, so it can't overflow. - Keep the active page obvious: the current tab's icon + label light in the adobe accent, and More lights when its sheet's page is current. - Extract the nav destinations into a shared nav.tsx (adds an icon per item and a `primary` flag) imported by both the desktop header and the tab bar, so the two can't drift. - The tab bar uses the existing pwa-safe-bottom inset to clear the iOS home indicator; main gains mobile bottom padding (pb-24) and the toast stack + PWA install card float above the bar on phones. Verified in a phone-viewport browser pass: header width equals the 390px viewport (no horizontal scroll), the active tab follows navigation, the More sheet lists Structure/Archive and lights More on those pages, and the desktop inline nav is unchanged.
REFERENCE App-header section now describes the desktop/mobile split; DECISIONS gains the PROG-79 entry (why a bottom tab bar over a hamburger, the 5-slot split, shared nav source, and the safe-area/overlay handling).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PROG-79 — Improve mobile top nav
On a phone (incl. the installed PWA), the top nav packed the Progress logo + six text links + the New menu + the avatar into one row, which overflowed and scrolled horizontally. This swaps the navigation pattern on small screens rather than dropping destinations.
What changed
MobileTabBar.tsx,sm:hidden) — Board · Outline · Agenda · Search as tabs, plus a More tab whose sheet holds Structure · Archive (the iOS-standard 5-slot pattern). The mobile header is now just logo + New + avatar, so it can't overflow.sm+ the bar is hidden and the original inline nav (all six) returns./structure), so you always know where you are.nav.tsx(adds a per-item icon + aprimaryflag), imported by both the desktop header and the tab bar so they can't drift.pwa-safe-bottominset (clears the iOS home indicator);maingains mobile bottom padding and the toast stack + PWA install card float above the bar on phones.Verification
Phone-viewport (390×844) browser pass:
aria-current).tsc -bclean;bun run test→ 84 pass.Docs
docs/REFERENCE.md— App-header section (desktop/mobile split).docs/DECISIONS.md—### PROG-79entry (bottom bar vs hamburger, the 5-slot split, shared nav, safe-area handling).