feat(ui): Mobile hamburger nav menu
This commit is contained in:
Cipher Vance
parent
0bab1b5dd8
commit
24155bbf76
2 changed files with 186 additions and 11 deletions
|
|
@ -65,6 +65,7 @@ body {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative; /* for mobile dropdown positioning */
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -75,6 +76,10 @@ body {
|
|||
transition: transform 0.3s ease;
|
||||
letter-spacing: 0.2px;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
|
|
@ -85,6 +90,12 @@ body {
|
|||
color: var(--accent);
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
display: block;
|
||||
height: 28px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
|
|
@ -115,6 +126,35 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/* Hamburger toggle (hidden on desktop) */
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(2, 6, 23, 0.08);
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-toggle:hover {
|
||||
box-shadow: var(--shadow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-toggle .bar {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: var(--text-dark);
|
||||
border-radius: 2px;
|
||||
transition: transform 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
Hero Section (Landing)
|
||||
======================= */
|
||||
|
|
@ -297,10 +337,24 @@ body {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.app-brand-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
border-radius: 6px; /* optional */
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
|
|
@ -350,8 +404,8 @@ body {
|
|||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
|
|
@ -708,13 +762,73 @@ body {
|
|||
/* =======================
|
||||
Responsive
|
||||
======================= */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-container {
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* Show hamburger, convert links to dropdown */
|
||||
.nav-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: absolute;
|
||||
top: 64px; /* below navbar */
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
display: none; /* hidden until opened */
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
list-style: none;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(2, 6, 23, 0.08);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 8px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.nav-links.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Remove desktop underline animation on mobile */
|
||||
.nav-links a::after {
|
||||
display: none;
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Animate hamburger to X when active */
|
||||
.nav-toggle.active .bar:nth-child(1) {
|
||||
transform: translateY(7px) rotate(45deg);
|
||||
}
|
||||
.nav-toggle.active .bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.nav-toggle.active .bar:nth-child(3) {
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
|
|
@ -793,7 +907,9 @@ body {
|
|||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Article layout for newsletter detail */
|
||||
/* =======================
|
||||
Article layout for newsletter detail
|
||||
======================= */
|
||||
.article-wrap {
|
||||
max-width: 1200px;
|
||||
margin: 6rem auto 3rem;
|
||||
|
|
@ -872,8 +988,13 @@ body {
|
|||
color: var(--text-dark);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
#toc-list a:hover { color: var(--secondary); }
|
||||
.toc-h3 { margin-left: 0.75rem; opacity: 0.9; }
|
||||
#toc-list a:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
.toc-h3 {
|
||||
margin-left: 0.75rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.article-main .article-hero {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -56,7 +56,11 @@
|
|||
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="{{ url_for('index') }}" class="logo" aria-label="RideAware home">
|
||||
<a
|
||||
href="{{ url_for('index') }}"
|
||||
class="logo"
|
||||
aria-label="RideAware home"
|
||||
>
|
||||
<img
|
||||
src="{{ url_for('static', filename='assets/logo.png') }}"
|
||||
alt="RideAware"
|
||||
|
|
@ -67,9 +71,22 @@
|
|||
fetchpriority="high"
|
||||
/>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
|
||||
<button
|
||||
class="nav-toggle"
|
||||
id="nav-toggle"
|
||||
aria-label="Toggle navigation"
|
||||
aria-controls="primary-nav"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links" id="primary-nav">
|
||||
{% if is_home %}
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#features">Features</a></li>
|
||||
{% endif %}
|
||||
<li><a href="{{ url_for('newsletters') }}">Newsletters</a></li>
|
||||
</ul>
|
||||
|
|
@ -89,6 +106,43 @@
|
|||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
(function () {
|
||||
const btn = document.getElementById("nav-toggle");
|
||||
const menu = document.getElementById("primary-nav");
|
||||
if (!btn || !menu) return;
|
||||
|
||||
function closeMenu() {
|
||||
btn.classList.remove("active");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
menu.classList.remove("open");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", () => {
|
||||
const open = btn.classList.toggle("active");
|
||||
btn.setAttribute("aria-expanded", String(open));
|
||||
menu.classList.toggle("open", open);
|
||||
});
|
||||
|
||||
// Close on link click (for anchors like #features)
|
||||
menu.addEventListener("click", (e) => {
|
||||
if (e.target.tagName === "A") closeMenu();
|
||||
});
|
||||
|
||||
// Close on escape
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") closeMenu();
|
||||
});
|
||||
|
||||
// Close if clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menu.contains(e.target) && !btn.contains(e.target)) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue