hermes-skills/skills/software-development/shark-game-development/references/unified-bottom-nav-pattern.md at master

ippadmin/hermes-skills

Fork 0

Files

T

root 1b4fcd4427 Initial skills documentation — 25 categories, all SKILL.md + references + scripts

2026-07-15 17:42:20 -04:00

3.0 KiB

Raw Permalink Blame History

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() 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:

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.

3.0 KiB Raw Permalink Blame History

Unified Bottom Navigation (Fixed Tab Bar)