Skip to content

Commit cbe6e67

Browse files
Mooo0042Mooo0042
committed
remove light dark temporarely, fix burgermenue
1 parent 793e7b8 commit cbe6e67

File tree

7 files changed

+152
-55
lines changed

7 files changed

+152
-55
lines changed

‎about.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ <h2>Get Involved</h2>
7575
<p>Thank you for your support!</p>
7676
</div>
7777
</main>
78-
<script src="/assets/js/nav-theme.js"></script>
78+
<script src="assets/js/nav-theme.js"></script>
7979
<h2>A Song</h2>
8080
<p>Cause why not?</p>
8181
<div id="spotify-embed"></div>

‎assets/js/nav-theme.js‎

Lines changed: 111 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@
1616
let saved = localStorage.getItem(THEME_KEY) || (prefersDark ? 'dark' : 'light');
1717
applyTheme(saved);
1818

19-
// Wait for DOM
20-
document.addEventListener('DOMContentLoaded', () => {
21-
// Build fallback nav if markup missing
22-
const navs = document.querySelectorAll('nav.navbar');
19+
// Init routine
20+
function initNavAndTheme() {
21+
try {
22+
console.debug('nav-theme: init start');
23+
// Build fallback nav if markup missing
24+
const navs = document.querySelectorAll('nav.navbar');
2325
navs.forEach((oldNav) => {
2426
// If .site-nav already present, skip
2527
if (oldNav.classList.contains('site-nav')) return;
@@ -77,53 +79,116 @@
7779
oldNav.replaceWith(newNav);
7880
});
7981

80-
// Wire up interactions
81-
const navToggle = document.getElementById('nav-toggle');
82-
const menu = document.getElementById('primary-menu');
83-
const themeBtn = document.getElementById('theme-toggle');
84-
85-
if (navToggle && menu) {
86-
navToggle.addEventListener('click', () => {
87-
const open = navToggle.getAttribute('aria-expanded') === 'true';
88-
navToggle.setAttribute('aria-expanded', String(!open));
89-
if (open) {
90-
menu.hidden = true;
82+
// Wire up interactions per nav (support multiple navs)
83+
const siteNavs = document.querySelectorAll('nav.site-nav');
84+
siteNavs.forEach((nav) => {
85+
const navToggle = nav.querySelector('#nav-toggle');
86+
const menu = nav.querySelector('#primary-menu');
87+
const themeBtn = nav.querySelector('#theme-toggle');
88+
89+
// Ensure menu visibility based on viewport
90+
const innerLinks = menu ? menu.querySelector('.nav-links') : null;
91+
function syncForViewport() {
92+
if (window.innerWidth >= 720) {
93+
// show menu on desktop
94+
if (menu) menu.hidden = false;
95+
if (innerLinks) innerLinks.classList.remove('active');
96+
if (navToggle) navToggle.setAttribute('aria-expanded', 'false');
9197
} else {
92-
menu.hidden = false;
93-
const first = menu.querySelector('a,button,[tabindex]:not([tabindex="-1"])');
94-
if (first) first.focus();
98+
// mobile: hide menu by default
99+
if (menu) menu.hidden = true;
100+
if (innerLinks) innerLinks.classList.remove('active');
101+
if (navToggle) navToggle.setAttribute('aria-expanded', 'false');
95102
}
96-
});
103+
}
97104

98-
// close on outside click
99-
document.addEventListener('click', (e) => {
100-
if (!menu.contains(e.target) && !navToggle.contains(e.target) && !menu.hidden) {
101-
menu.hidden = true;
102-
navToggle.setAttribute('aria-expanded', 'false');
103-
}
104-
});
105-
106-
// Esc to close
107-
document.addEventListener('keydown', (e) => {
108-
if (e.key === 'Escape' && !menu.hidden) {
109-
menu.hidden = true;
110-
navToggle.setAttribute('aria-expanded', 'false');
111-
navToggle.focus();
112-
}
113-
});
105+
syncForViewport();
106+
window.addEventListener('resize', syncForViewport);
107+
108+
if (navToggle && menu) {
109+
navToggle.addEventListener('click', (e) => {
110+
e.stopPropagation();
111+
console.debug('nav-theme: navToggle click, innerWidth=', window.innerWidth, 'menu.hidden=', menu ? menu.hidden : 'no-menu');
112+
const open = navToggle.getAttribute('aria-expanded') === 'true';
113+
navToggle.setAttribute('aria-expanded', String(!open));
114+
if (open) {
115+
menu.hidden = true;
116+
if (innerLinks) innerLinks.classList.remove('active');
117+
} else {
118+
menu.hidden = false;
119+
if (innerLinks) innerLinks.classList.add('active');
120+
const first = menu.querySelector('a,button,[tabindex]:not([tabindex="-1"])');
121+
if (first) first.focus();
122+
}
123+
});
124+
125+
// close on outside click
126+
document.addEventListener('click', (e) => {
127+
if (!menu.contains(e.target) && !navToggle.contains(e.target) && !menu.hidden && window.innerWidth < 720) {
128+
menu.hidden = true;
129+
if (innerLinks) innerLinks.classList.remove('active');
130+
navToggle.setAttribute('aria-expanded', 'false');
131+
}
132+
});
133+
134+
// Esc to close
135+
document.addEventListener('keydown', (e) => {
136+
if (e.key === 'Escape' && !menu.hidden) {
137+
menu.hidden = true;
138+
navToggle.setAttribute('aria-expanded', 'false');
139+
navToggle.focus();
140+
}
141+
});
142+
}
143+
144+
// Theme toggle wiring
145+
if (themeBtn) {
146+
themeBtn.setAttribute('aria-pressed', document.documentElement.getAttribute('data-theme') === 'dark');
147+
themeBtn.addEventListener('click', (e) => {
148+
e.stopPropagation();
149+
console.debug('nav-theme: themeBtn click, before theme=', document.documentElement.getAttribute('data-theme'));
150+
const cur = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
151+
const next = cur === 'dark' ? 'light' : 'dark';
152+
applyTheme(next);
153+
localStorage.setItem(THEME_KEY, next);
154+
themeBtn.setAttribute('aria-pressed', next === 'dark');
155+
console.debug('nav-theme: themeBtn click, after theme=', document.documentElement.getAttribute('data-theme'));
156+
});
157+
}
158+
});
159+
console.debug('nav-theme: init done, navs=', siteNavs.length);
160+
} catch (err) {
161+
console.error('nav-theme: init error', err);
114162
}
163+
}
115164

116-
// Theme toggle wiring
117-
if (themeBtn) {
118-
// reflect saved
119-
themeBtn.setAttribute('aria-pressed', document.documentElement.getAttribute('data-theme') === 'dark');
120-
themeBtn.addEventListener('click', () => {
121-
const cur = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
122-
const next = cur === 'dark' ? 'light' : 'dark';
123-
applyTheme(next);
124-
localStorage.setItem(THEME_KEY, next);
125-
themeBtn.setAttribute('aria-pressed', next === 'dark');
126-
});
165+
if (document.readyState === 'loading') {
166+
document.addEventListener('DOMContentLoaded', initNavAndTheme);
167+
} else {
168+
// DOM already ready
169+
initNavAndTheme();
170+
}
171+
172+
// Delegated handler as a fallback: catch clicks on any .burger button
173+
document.addEventListener('click', (e) => {
174+
const btn = e.target.closest && e.target.closest('.burger');
175+
if (!btn) return;
176+
const nav = btn.closest && btn.closest('nav.site-nav');
177+
if (!nav) return;
178+
const navToggle = btn;
179+
const menu = nav.querySelector('#primary-menu');
180+
const innerLinks = menu ? menu.querySelector('.nav-links') : null;
181+
console.debug('nav-theme: delegated burger click, innerWidth=', window.innerWidth, 'menu.hidden=', menu ? menu.hidden : 'no-menu');
182+
const open = navToggle.getAttribute('aria-expanded') === 'true';
183+
navToggle.setAttribute('aria-expanded', String(!open));
184+
if (open) {
185+
if (menu) menu.hidden = true;
186+
if (innerLinks) innerLinks.classList.remove('active');
187+
} else {
188+
if (menu) menu.hidden = false;
189+
if (innerLinks) innerLinks.classList.add('active');
190+
const first = menu ? menu.querySelector('a,button,[tabindex]:not([tabindex="-1"])') : null;
191+
if (first) first.focus();
127192
}
128193
});
129194
})();

‎impr.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h2>Download and Support</h2>
7373
<p>Thank you for supporting IMPR!</p>
7474
</div>
7575
</main>
76-
<script src="/assets/js/nav-theme.js"></script>
76+
<script src="assets/js/nav-theme.js"></script>
7777
<h2>A Song</h2>
7878
<p>Cause why not?</p>
7979
<div id="spotify-embed"></div>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ <h2>Stay Connected</h2>
6565
<a href="https://discord.gg/VNrzdd5ErJ" class="btn">Join Discord</a>
6666
</div>
6767
</main>
68-
<script src="/assets/js/nav-theme.js"></script>
68+
<script src="assets/js/nav-theme.js"></script>
6969
<h2>A Song</h2>
7070
<p>Cause why not?</p>
7171
<div id="spotify-embed"></div>

‎oer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h2>Download and Support</h2>
7373
<p>Thank you for supporting OER!</p>
7474
</div>
7575
</main>
76-
<script src="/assets/js/nav-theme.js"></script>
76+
<script src="assets/js/nav-theme.js"></script>
7777
<h2>A Song</h2>
7878
<p>Cause why not?</p>
7979
<div id="spotify-embed"></div>

‎style.css‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -345,25 +345,33 @@ a:hover {
345345
position: fixed;
346346
top: 0;
347347
left: 0;
348+
right: 0;
349+
bottom: 0;
348350
width: 100%;
349351
height: 100vh;
350352
background: var(--bg-primary);
351353
flex-direction: column;
352354
justify-content: center;
353355
align-items: center;
354356
gap: 2rem;
355-
z-index: 999;
357+
z-index: 9999;
356358
opacity: 0;
357359
visibility: hidden;
358360
transition: all 0.3s ease;
359-
padding: 2rem;
361+
padding: 2rem 1rem 6rem 1rem; /* add bottom padding for comfortable scroll */
360362
text-align: center;
363+
overflow-y: auto;
364+
-webkit-overflow-scrolling: touch;
361365
}
362366

363367
.nav-links.active {
364368
display: flex;
365369
opacity: 1;
366370
visibility: visible;
371+
height: 100vh;
372+
bottom: 0;
373+
overflow-y: auto;
374+
-webkit-overflow-scrolling: touch;
367375
}
368376

369377
.nav-links a {
@@ -583,7 +591,7 @@ a:hover {
583591

584592
/* --- Accessible burger + unified theme toggle styles (appended) --- */
585593
.site-nav { display:flex; align-items:center; gap:12px; }
586-
.site-nav .nav-content { display:flex; align-items:center; gap:12px; width:100%; }
594+
.site-nav .nav-content { display:flex; align-items:center; gap:12px; width:100%; justify-content: space-between; }
587595
.burger {
588596
background:transparent; border:0; padding:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--text-primary);
589597
}
@@ -611,13 +619,37 @@ html[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
611619
html[data-theme="dark"] .theme-toggle .icon-moon { display:inline; }
612620

613621
@media (min-width: 720px) {
614-
.nav-menu { position:static; display:flex; gap:12px; background:transparent; box-shadow:none; transform:none; opacity:1; height:auto; padding:0; }
622+
.nav-menu { position:static; display:flex; gap:12px; background:transparent; box-shadow:none; transform:none; opacity:1; height:auto; padding:0; }
623+
/* If menu has the hidden attribute, ensure desktop still shows it */
624+
.nav-menu[hidden] { opacity:1 !important; transform:none !important; height:auto !important; pointer-events:auto !important; visibility:visible !important; }
615625
#nav-toggle { display:none; }
616626
}
617627

628+
@media (max-width: 768px) {
629+
.nav-menu { position: static; background: transparent; box-shadow: none; padding: 0; border-radius: 0; transform: none !important; }
630+
.nav-menu[hidden] { height: auto; }
631+
.navbar { overflow: visible !important; }
632+
}
633+
634+
/* Make sure theme toggle sits to the right and doesn't overlap the burger on mobile */
635+
.site-nav .theme-toggle { margin-left: 12px; z-index: 1002; }
636+
.site-nav .burger { z-index: 1003; }
637+
638+
@media (max-width: 768px) {
639+
/* Override older fixed positioning so theme button appears inside header */
640+
.theme-toggle { position: static !important; top: auto !important; right: auto !important; z-index: 1002 !important; margin-left: 8px !important; }
641+
}
642+
618643
/* ensure the existing mobile-toggle/hamburger don't conflict if present */
619644
.mobile-toggle { display:none !important; }
620645

646+
/* TEMP: hide the burger button while debugging mobile interactions
647+
(removed) */
648+
649+
/* TEMP: hide the theme toggle because it does not work right now
650+
Remove this block to restore the theme toggle: */
651+
.site-nav .theme-toggle { display: none !important; pointer-events: none !important; }
652+
621653

622654

623655

‎test.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@ <h2>Stay Connected</h2>
5959
<a href="https://discord.gg/VNrzdd5ErJ" class="btn">Join Discord</a>
6060
</div>
6161
</main>
62-
<script src="/assets/js/nav-theme.js"></script>
62+
<script src="assets/js/nav-theme.js"></script>
6363
</body>
6464
</html>

0 commit comments

Comments
 (0)