3.0 KiB
3.0 KiB
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 <body> |
Active on Scoring (first item) |
league.html |
End of <body> |
Active on League |
settings.html |
End of <body> |
Active on Settings |
help.html |
End of <body> |
Active on Help |
how-to-play.html |
Replaced inline nav | Active on Learn |
CSS (identical on every page)
.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 <body> 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()callsdocument.getElementById('bottomNav').classList.remove('hidden')logout()callsdocument.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:
- Update ALL 6 HTML files' tab bar HTML (use search_files to find all
<div class="bottom-nav">blocks) - Update the CSS if the number of items changes significantly (flex:1 handles even distribution)
- Update settings.html and help.html — they also have the tab bar
- 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.