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

2 files changed, 99 insertions, 78 deletions

diff --git a/Biz/PodcastItLater/UI.py b/Biz/PodcastItLater/UI.py
index 1a70c49..940abd5 100644
--- a/Biz/PodcastItLater/UI.py
+++ b/Biz/PodcastItLater/UI.py
@@ -49,8 +49,7 @@ def create_auto_dark_mode_style() -> html.style:
 
             /* Navbar dark mode */
             .navbar.bg-body-tertiary {
-                background-color: #2b3035 !important;
-                border-bottom: 1px solid #495057;
+            background-color: #2b3035 !important;
             }
 
             .navbar .navbar-text {
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",
                         ],
                     )