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

34
frontend/src/App.tsx
View File

@@ -251,20 +251,22 @@ function ShellLayout() {
return (
<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">
<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>
</nav>
</div>
</header>
) : null}
<main className="container-fluid py-4">
<Routes>

11
frontend/src/styles.css
View File

@@ -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;
}