Skip to content

Highlight active bottom tab bar section with PyCon 2026 pink#258

Merged
JacobCoffee merged 1 commit intomainfrom
fix/tab-bar-active-highlight
Apr 18, 2026
Merged

Highlight active bottom tab bar section with PyCon 2026 pink#258
JacobCoffee merged 1 commit intomainfrom
fix/tab-bar-active-highlight

Conversation

@JacobCoffee
Copy link
Copy Markdown
Member

Summary

  • Ionic's built-in tab-selected detection wasn't firing for any tab in this app, so every tab button always read as inactive regardless of which section you were in.
  • Drive the active tab explicitly from the router URL (first path segment under `/app/tabs/`) and apply a `pycon-active` class to the matching `ion-tab-button`.
  • Active tab uses `--color: #DD04D2` (PyCon 2026 neon pink) with a bold label.

Test plan

  • Open Schedule — Schedule tab is pink + bold; others are default gray
  • Open Speakers — Speakers tab is pink; others default
  • Open Map (Conference Center) — Map tab is pink
  • Open Now — Now tab is pink
  • Logged out → open Login — Login tab is pink
  • Navigate between tabs — highlight moves in real time (no stale highlight)
  • Side-menu-only pages (About PyCon, COC, Wifi, etc.) — no tab highlighted, same as before

Ionic's built-in tab-selected detection wasn't firing for any tab here, so
every tab always read as inactive. Drive the active tab explicitly from the
router URL (first segment under /app/tabs/) and apply a pycon-active class
to the matching ion-tab-button. Active tab uses --color #DD04D2 (2026 neon
pink) and a bold label.
@JacobCoffee JacobCoffee merged commit bdea2ce into main Apr 18, 2026
2 checks passed
@JacobCoffee JacobCoffee deleted the fix/tab-bar-active-highlight branch April 18, 2026 04:57
@JacobCoffee
Copy link
Copy Markdown
Member Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant