Fix theme toggle (add light theme CSS) and improve mobile sidebar usability

This commit is contained in:
2026-06-07 13:02:31 -04:00
parent cd24cc53a0
commit c45354db11
3 changed files with 138 additions and 19 deletions

View File

@@ -13,32 +13,55 @@
const sidebar = document.getElementById('sidebar');
const sidebarToggle = document.getElementById('sidebarToggle');
const mobileToggle = document.getElementById('mobileToggle');
const mobileOverlay = document.getElementById('mobileOverlay');
if (sidebarToggle) {
function closeMobileSidebar() {
if (!sidebar) return;
sidebar.classList.remove('mobile-open');
if (mobileOverlay) mobileOverlay.classList.remove('active');
}
if (sidebarToggle && sidebar) {
sidebarToggle.addEventListener('click', function () {
const isCollapsed = sidebar.classList.toggle('collapsed');
localStorage.setItem('sidebar_collapsed', isCollapsed ? '1' : '0');
try { localStorage.setItem('sidebar_collapsed', isCollapsed ? '1' : '0'); } catch (e) {}
});
if (localStorage.getItem('sidebar_collapsed') === '1') {
sidebar.classList.add('collapsed');
}
try {
if (window.innerWidth > 768 && localStorage.getItem('sidebar_collapsed') === '1') {
sidebar.classList.add('collapsed');
}
} catch (e) {}
}
if (mobileToggle) {
if (mobileToggle && sidebar) {
mobileToggle.addEventListener('click', function () {
sidebar.classList.toggle('mobile-open');
const opening = !sidebar.classList.contains('mobile-open');
if (opening) {
sidebar.classList.remove('collapsed');
sidebar.classList.add('mobile-open');
if (mobileOverlay) mobileOverlay.classList.add('active');
} else {
closeMobileSidebar();
}
});
}
document.addEventListener('click', function (e) {
if (window.innerWidth <= 768 &&
sidebar.classList.contains('mobile-open') &&
!sidebar.contains(e.target) &&
e.target !== mobileToggle) {
sidebar.classList.remove('mobile-open');
}
});
if (sidebar) {
document.addEventListener('click', function (e) {
if (window.innerWidth <= 768 &&
sidebar.classList.contains('mobile-open') &&
!sidebar.contains(e.target) &&
e.target !== mobileToggle &&
e.target !== mobileOverlay) {
closeMobileSidebar();
}
});
}
if (mobileOverlay) {
mobileOverlay.addEventListener('click', closeMobileSidebar);
}
/* ==========================================================================
Theme Toggle