Skip to content

Commit 06ac045

Browse files
jedisct1jedisct1
committed
Improve mobile navigation for smaller screens
1 parent 0a72821 commit 06ac045

File tree

2 files changed

+148
-7
lines changed

2 files changed

+148
-7
lines changed

‎www/_includes/header.html‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,37 +19,82 @@
1919
</a>
2020
</nav>
2121
<div class="md:hidden">
22-
<button id="mobile-menu-button" class="text-gray-700 hover:text-primary">
23-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
22+
<button id="mobile-menu-button" class="text-gray-700 hover:text-primary" aria-label="Toggle menu" aria-expanded="false">
23+
<svg id="menu-icon-bars" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2424
<line x1="3" y1="12" x2="21" y2="12"></line>
2525
<line x1="3" y1="6" x2="21" y2="6"></line>
2626
<line x1="3" y1="18" x2="21" y2="18"></line>
2727
</svg>
28+
<svg id="menu-icon-close" class="hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
29+
<line x1="18" y1="6" x2="6" y2="18"></line>
30+
<line x1="6" y1="6" x2="18" y2="18"></line>
31+
</svg>
2832
</button>
2933
</div>
3034
</div>
3135
<!-- Mobile menu (hidden by default) -->
32-
<div id="mobile-menu" class="hidden md:hidden">
33-
<nav class="container mx-auto px-4 py-4 flex flex-col space-y-4 bg-white border-t">
36+
<div id="mobile-menu" class="hidden md:hidden fixed top-[60px] left-0 right-0 z-50 bg-white border-t border-b">
37+
<nav class="container mx-auto flex flex-col bg-white">
3438
{% for item in site.navigation %}
35-
<a href="{{ site.baseurl }}{{ item.url }}" class="text-gray-700 hover:text-primary font-medium py-2">{{ item.title }}</a>
39+
<a href="{{ site.baseurl }}{{ item.url }}" class="text-gray-700 hover:text-primary hover:bg-gray-50 font-medium py-3 px-6">{{ item.title }}</a>
3640
{% endfor %}
37-
<a href="{{ site.github_repo }}" class="text-gray-700 hover:text-primary font-medium py-2 flex items-center" target="_blank" rel="noopener">
38-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="mr-1">
41+
<a href="{{ site.github_repo }}" class="text-gray-700 hover:text-primary hover:bg-gray-50 font-medium py-3 px-6 flex items-center" target="_blank" rel="noopener">
42+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="mr-2">
3943
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
4044
</svg>
4145
GitHub
4246
</a>
4347
</nav>
48+
<!-- Backdrop for mobile menu -->
49+
<div class="fixed inset-0 bg-black bg-opacity-25 z-[-1]"></div>
4450
</div>
4551
<script>
4652
document.addEventListener('DOMContentLoaded', function() {
4753
const mobileMenuButton = document.getElementById('mobile-menu-button');
4854
const mobileMenu = document.getElementById('mobile-menu');
55+
const menuIconBars = document.getElementById('menu-icon-bars');
56+
const menuIconClose = document.getElementById('menu-icon-close');
4957

5058
if (mobileMenuButton && mobileMenu) {
5159
mobileMenuButton.addEventListener('click', function() {
60+
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
61+
62+
// Toggle menu visibility
5263
mobileMenu.classList.toggle('hidden');
64+
65+
// Toggle aria-expanded attribute
66+
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
67+
68+
// Toggle menu icons
69+
menuIconBars.classList.toggle('hidden');
70+
menuIconClose.classList.toggle('hidden');
71+
72+
// Prevent scrolling when menu is open
73+
document.body.style.overflow = isExpanded ? '' : 'hidden';
74+
});
75+
76+
// Close menu when clicking outside
77+
document.addEventListener('click', function(event) {
78+
if (!mobileMenu.classList.contains('hidden') &&
79+
!mobileMenu.contains(event.target) &&
80+
!mobileMenuButton.contains(event.target)) {
81+
mobileMenu.classList.add('hidden');
82+
mobileMenuButton.setAttribute('aria-expanded', 'false');
83+
menuIconBars.classList.remove('hidden');
84+
menuIconClose.classList.add('hidden');
85+
document.body.style.overflow = '';
86+
}
87+
});
88+
89+
// Close menu when pressing Escape key
90+
document.addEventListener('keydown', function(event) {
91+
if (event.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
92+
mobileMenu.classList.add('hidden');
93+
mobileMenuButton.setAttribute('aria-expanded', 'false');
94+
menuIconBars.classList.remove('hidden');
95+
menuIconClose.classList.add('hidden');
96+
document.body.style.overflow = '';
97+
}
5398
});
5499
}
55100
});

‎www/assets/css/main.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,102 @@
211211
flex-grow: 1;
212212
}
213213

214+
/* Mobile Navigation */
215+
#mobile-menu-button {
216+
cursor: pointer;
217+
padding: 0.5rem;
218+
border-radius: 0.375rem;
219+
transition: background-color 0.3s ease;
220+
}
221+
222+
#mobile-menu-button:hover {
223+
background-color: rgba(0, 0, 0, 0.05);
224+
}
225+
226+
#mobile-menu-button:focus {
227+
outline: none;
228+
box-shadow: 0 0 0 2px var(--color-primary-dark);
229+
}
230+
231+
#mobile-menu {
232+
transition: transform 0.3s ease, opacity 0.3s ease;
233+
transform-origin: top;
234+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
235+
max-height: 80vh;
236+
overflow-y: auto;
237+
}
238+
239+
#mobile-menu.hidden {
240+
display: block;
241+
transform: scaleY(0);
242+
opacity: 0;
243+
height: 0;
244+
overflow: hidden;
245+
}
246+
247+
#mobile-menu:not(.hidden) {
248+
transform: scaleY(1);
249+
opacity: 1;
250+
}
251+
252+
#mobile-menu a {
253+
border-bottom: 1px solid var(--color-border);
254+
padding-left: 1rem;
255+
padding-right: 1rem;
256+
transition: background-color 0.2s ease;
257+
}
258+
259+
#mobile-menu a:last-child {
260+
border-bottom: none;
261+
}
262+
263+
#mobile-menu a:hover {
264+
background-color: var(--color-background);
265+
}
266+
267+
/* Responsive Adjustments */
268+
@media (max-width: 767px) {
269+
.site-header {
270+
position: sticky;
271+
top: 0;
272+
z-index: 100;
273+
}
274+
275+
h1 {
276+
font-size: 1.875rem;
277+
}
278+
279+
h2 {
280+
font-size: 1.5rem;
281+
}
282+
283+
h3 {
284+
font-size: 1.25rem;
285+
}
286+
287+
.feature-list {
288+
grid-template-columns: 1fr;
289+
}
290+
291+
.mode-card {
292+
padding: 1rem;
293+
}
294+
295+
.diagram-container {
296+
margin: 1rem 0;
297+
font-size: 0.7rem;
298+
}
299+
300+
.mode-comparison {
301+
font-size: 0.8rem;
302+
}
303+
304+
.mode-comparison th,
305+
.mode-comparison td {
306+
padding: 0.5rem;
307+
}
308+
}
309+
214310
@media (min-width: 768px) {
215311
.md\:flex {
216312
display: flex;

0 commit comments

Comments
 (0)