From 7773f9521a6f94d045fc5ffb665894f56570ea8e Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 23 Apr 2026 12:24:09 -0500
Subject: [PATCH] Refactor navbar to Bootstrap structure

---
 frontend/src/App.tsx    | 62 ++++++++++++++++++++++++-----------------
 frontend/src/styles.css | 11 --------
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b1f0e98..a84d8c6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -249,22 +249,24 @@ function ShellLayout() {
   }, [showTeamSelectionModal]);
 
   return (
-    <div className={shellClassName}>
+      <div className={shellClassName}>
       {showNavbar ? (
-        <header className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2">
-          <div className="container-fluid gap-3 align-items-center">
-            <div className="navbar-brand d-flex align-items-center gap-3 mb-0">
+        <nav className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2" aria-label="Primary">
+          <div className="container-fluid">
+            <NavLink to="/" className="navbar-brand d-flex align-items-center gap-3 mb-0">
               <span className="site-brand-mark" aria-hidden="true">
                 <i className="bi bi-person-walking" />
               </span>
-              <div className="site-brand-copy">
+              <span className="d-flex flex-column gap-0">
                 <span className="fw-semibold fs-4 lh-1 text-white">Walkup</span>
-                {currentPageLabel ? <span className="current-page-label d-lg-none">{currentPageLabel}</span> : null}
-              </div>
-            </div>
+                {currentPageLabel ? (
+                  <span className="navbar-text d-lg-none small lh-1 text-white-50">{currentPageLabel}</span>
+                ) : null}
+              </span>
+            </NavLink>
             <button
               type="button"
-              className="navbar-toggler"
+              className="navbar-toggler ms-auto"
               aria-expanded={navOpen}
               aria-controls="primary-nav"
               aria-label={navOpen ? "Close menu" : "Open menu"}
@@ -272,24 +274,32 @@ function ShellLayout() {
             >
               <span className="navbar-toggler-icon" aria-hidden="true" />
             </button>
-            <nav id="primary-nav" className={`navbar-collapse collapse${navOpen ? " show" : ""}`}>
-              <div className="navbar-nav ms-auto gap-2">
-                <NavLink to="/" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
-                  Home
-                </NavLink>
-                <NavLink to="/library" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
-                  Walkup Clips
-                </NavLink>
-                <NavLink to="/gameday" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
-                  Gameday
-                </NavLink>
-                <NavLink to="/profile" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
-                  Profile
-                </NavLink>
-              </div>
-            </nav>
+            <div id="primary-nav" className={`navbar-collapse collapse${navOpen ? " show" : ""}`}>
+              <ul className="navbar-nav ms-auto gap-2">
+                <li className="nav-item">
+                  <NavLink to="/" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                    Home
+                  </NavLink>
+                </li>
+                <li className="nav-item">
+                  <NavLink to="/library" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                    Walkup Clips
+                  </NavLink>
+                </li>
+                <li className="nav-item">
+                  <NavLink to="/gameday" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                    Gameday
+                  </NavLink>
+                </li>
+                <li className="nav-item">
+                  <NavLink to="/profile" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                    Profile
+                  </NavLink>
+                </li>
+              </ul>
+            </div>
           </div>
-        </header>
+        </nav>
       ) : null}
       <main className="container-fluid py-4">
         <Routes>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 73f7c9b..dfe46be 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -136,17 +136,6 @@ select {
   margin-left: 0.15rem;
 }
 
-.site-brand-copy {
-  display: grid;
-  gap: 0.16rem;
-}
-
-.current-page-label {
-  color: rgba(255, 255, 255, 0.68);
-  font-size: 0.72rem;
-  line-height: 1.2;
-}
-
 .clip-list-add-button .bootstrap-icon {
   font-size: 1.2rem;
 }