From 54aff58650d9ade97cabf4d154dea114a6a8a313 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Wed, 12 Nov 2025 16:21:04 -0500 Subject: Make navbar collapsible on mobile with toggler - Add hamburger toggle button positioned on right side - Navbar collapses on small screens (< lg breakpoint) - Mobile view shows vertically stacked elements: - Logged in as: email - Free: X articles left [Upgrade Now] (free users) - Billing (paid users only) - Admin Queue (admins only) - Logout - Remove 'Plan: Pro' text for paid users (just show Billing button) - Add rounded corners to navbar with 'rounded' class - Remove 1px bottom border in dark mode - Toggle controlled by Bootstrap's collapse component --- Biz/PodcastItLater/Web.py | 174 ++++++++++++++++++++++++++-------------------- 1 file changed, 98 insertions(+), 76 deletions(-) (limited to 'Biz/PodcastItLater/Web.py') diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py index dc5f86c..1c628d5 100644 --- a/Biz/PodcastItLater/Web.py +++ b/Biz/PodcastItLater/Web.py @@ -964,13 +964,8 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): ), classes=["d-flex", "align-items-center"], ) - # Paid plan - just show plan name - return html.span( - html.i(classes=["bi", "bi-star", "me-2"]), - html.strong("Plan: "), - Billing.get_tier_info(tier)["name"], - classes=["navbar-text"], - ) + # Paid plan - don't show plan name on navbar + return html.span() @override def render(self) -> html.html: @@ -1044,87 +1039,114 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): # User info navbar html.nav( html.div( - html.div( - html.span( - html.strong("Logged in as: "), - user["email"], - classes=["navbar-text", "me-3"], - ), - self._render_plan_banner(user), - classes=[ - "d-flex", - "align-items-center", - "me-auto", - ], + # Hamburger toggle button (right side) + html.button( # type: ignore[call-arg] + html.span(classes=["navbar-toggler-icon"]), + classes=["navbar-toggler", "ms-auto"], + type="button", + data_bs_toggle="collapse", + data_bs_target="#navbarNav", + aria_controls="navbarNav", + aria_expanded="false", + aria_label="Toggle navigation", ), + # Collapsible content html.div( - html.a( - html.i( - classes=[ - "bi", - "bi-credit-card", - "me-1", - ], - ), - "Billing", - href="/billing", - classes=[ - "btn", - "btn-outline-secondary", - "btn-sm", - "me-2", - ], - ) - if user.get("plan_tier", "free") != "free" - else html.span(), - html.a( - html.i( - classes=[ - "bi", - "bi-gear-fill", - "me-1", - ], + # User email + html.div( + html.span( + html.strong("Logged in as: "), + user["email"], + classes=["navbar-text"], ), - "Admin Queue", - href="/admin", classes=[ - "btn", - "btn-outline-primary", - "btn-sm", - "me-2", + "navbar-nav", + "me-auto", + "mb-2", + "mb-lg-0", ], - ) - if Core.is_admin(user) - else html.span(), - html.a( - html.i( - classes=[ - "bi", - "bi-box-arrow-right", - "me-1", - ], + ), + # Plan banner/upgrade button + html.div( + self._render_plan_banner(user), + classes=["navbar-nav", "mb-2", "mb-lg-0"], + ), + # Action buttons + html.div( + html.div( + html.a( + html.i( + classes=[ + "bi", + "bi-credit-card", + "me-1", + ], + ), + "Billing", + href="/billing", + classes=[ + "btn", + "btn-outline-secondary", + "btn-sm", + "me-2", + "mb-2", + "mb-lg-0", + ], + ) + if user.get("plan_tier", "free") + != "free" + else html.span(), + html.a( + html.i( + classes=[ + "bi", + "bi-gear-fill", + "me-1", + ], + ), + "Admin Queue", + href="/admin", + classes=[ + "btn", + "btn-outline-primary", + "btn-sm", + "me-2", + "mb-2", + "mb-lg-0", + ], + ) + if Core.is_admin(user) + else html.span(), + html.a( + html.i( + classes=[ + "bi", + "bi-box-arrow-right", + "me-1", + ], + ), + "Logout", + href="/logout", + classes=[ + "btn", + "btn-outline-danger", + "btn-sm", + ], + ), + classes=["d-flex", "flex-wrap"], ), - "Logout", - href="/logout", - classes=[ - "btn", - "btn-outline-danger", - "btn-sm", - ], + classes=["navbar-nav"], ), - classes=["d-flex", "align-items-center"], + id="navbarNav", + classes=["collapse", "navbar-collapse"], ), - classes=[ - "container-fluid", - "d-flex", - "flex-wrap", - "align-items-center", - ], + classes=["container-fluid"], ), classes=[ "navbar", - "navbar-expand", + "navbar-expand-lg", "bg-body-tertiary", + "rounded", "mb-4", ], ) -- cgit v1.2.3