asc/walkup
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor navbar to Bootstrap structure

Browse Source
This commit is contained in:
Codex
2026-04-23 12:24:09 -05:00
parent 6faf6f6dd5
commit 7773f9521a
2 changed files with 36 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/App.tsx
View File

@@ -249,22 +249,24 @@ function ShellLayout() {
}, [showTeamSelectionModal]); }, [showTeamSelectionModal]);
return ( return (
<div className={shellClassName}> <div className={shellClassName}>
{showNavbar ? ( {showNavbar ? (
<header className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2"> <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 gap-3 align-items-center"> <div className="container-fluid">
<div className="navbar-brand d-flex align-items-center gap-3 mb-0"> <NavLink to="/" className="navbar-brand d-flex align-items-center gap-3 mb-0">
<span className="site-brand-mark" aria-hidden="true"> <span className="site-brand-mark" aria-hidden="true">
<i className="bi bi-person-walking" /> <i className="bi bi-person-walking" />
</span> </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> <span className="fw-semibold fs-4 lh-1 text-white">Walkup</span>
{currentPageLabel ? <span className="current-page-label d-lg-none">{currentPageLabel}</span> : null} {currentPageLabel ? (
</div> <span className="navbar-text d-lg-none small lh-1 text-white-50">{currentPageLabel}</span>
</div> ) : null}
</span>
</NavLink>
<button <button
type="button" type="button"
className="navbar-toggler" className="navbar-toggler ms-auto"
aria-expanded={navOpen} aria-expanded={navOpen}
aria-controls="primary-nav" aria-controls="primary-nav"
aria-label={navOpen ? "Close menu" : "Open menu"} aria-label={navOpen ? "Close menu" : "Open menu"}
@@ -272,24 +274,32 @@ function ShellLayout() {
> >
<span className="navbar-toggler-icon" aria-hidden="true" /> <span className="navbar-toggler-icon" aria-hidden="true" />
</button> </button>
<nav id="primary-nav" className={`navbar-collapse collapse${navOpen ? " show" : ""}`}> <div id="primary-nav" className={`navbar-collapse collapse${navOpen ? " show" : ""}`}>
<div className="navbar-nav ms-auto gap-2"> <ul className="navbar-nav ms-auto gap-2">
<NavLink to="/" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> <li className="nav-item">
Home <NavLink to="/" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
</NavLink> Home
<NavLink to="/library" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> </NavLink>
Walkup Clips </li>
</NavLink> <li className="nav-item">
<NavLink to="/gameday" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> <NavLink to="/library" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
Gameday Walkup Clips
</NavLink> </NavLink>
<NavLink to="/profile" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> </li>
Profile <li className="nav-item">
</NavLink> <NavLink to="/gameday" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
</div> Gameday
</nav> </NavLink>
</li>
<li className="nav-item">
<NavLink to="/profile" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
Profile
</NavLink>
</li>
</ul>
</div>
</div> </div>
</header> </nav>
) : null} ) : null}
<main className="container-fluid py-4"> <main className="container-fluid py-4">
<Routes> <Routes>

11
frontend/src/styles.css
View File

@@ -136,17 +136,6 @@ select {
margin-left: 0.15rem; 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 { .clip-list-add-button .bootstrap-icon {
font-size: 1.2rem; font-size: 1.2rem;
} }