# Unified Bottom Navigation (Fixed Tab Bar) Added Jul 9, 2026. Every game page now has the **same** fixed bottom tab bar for consistent navigation. ## The tab bar (7 items, same order on every page) ``` 🏆 Scoring → draft-room.html 📊 Standings → draft-room.html 🦈 My Team → draft-room.html 📋 League → league.html ⚙️ Settings → settings.html ❓ Help → help.html 📖 Learn → how-to-play.html ``` ## Files with the tab bar | Page | Marker | Notes | |------|--------|-------| | `index.html` | `id="bottomNav"`, class `hidden` | Hidden before login, shown via JS | | `draft-room.html` | End of `` | Active on Scoring (first item) | | `league.html` | End of `` | Active on League | | `settings.html` | End of `` | Active on Settings | | `help.html` | End of `` | Active on Help | | `how-to-play.html` | Replaced inline nav | Active on Learn | ## CSS (identical on every page) ```css .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: rgba(10, 22, 40, 0.95); border-top: 1px solid rgba(14, 165, 233, 0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; font-size: 10px; color: var(--text-muted); text-decoration: none; font-weight: 600; transition: color 0.2s; border-top: 2px solid transparent; } .bottom-nav a .nav-icon { font-size: 18px; line-height: 1; } .bottom-nav a.active { color: var(--amber); border-top-color: var(--amber); } ``` ## Body padding Every page with a fixed tab bar needs `padding-bottom: 80px` on `` to prevent content from being hidden behind the nav. On `index.html`, this is applied unconditionally even though the nav starts hidden — the auth form sits centered in the viewport and the extra bottom space doesn't interfere. ## Special case: index.html - The tab bar has `class="hidden"` (display:none) in the static HTML - `onAuthSuccess()` calls `document.getElementById('bottomNav').classList.remove('hidden')` - `logout()` calls `document.getElementById('bottomNav').classList.add('hidden')` - This keeps the landing/auth screen clean while giving authenticated users the full tab bar ## Adding a new tab If you add or rename a tab: 1. Update ALL 6 HTML files' tab bar HTML (use search_files to find all `

` blocks) 2. Update the CSS if the number of items changes significantly (flex:1 handles even distribution) 3. Update settings.html and help.html — they also have the tab bar 4. Choose which page gets `class="active"` on each file ## Removing Feed tab The original settings.html had a "Feed" tab (📡) pointing to draft-room.html. This was replaced by the unified 7-item bar above. The Feed tab was never implemented as a separate page — it was a placeholder.