jilo-web/public_html/static/sidebar.js

49 lines
1.6 KiB
JavaScript
Raw Normal View History

2024-08-05 16:53:24 +00:00
document.addEventListener('DOMContentLoaded', function () {
var sidebar = document.getElementById('sidebar');
var mainContent = document.getElementById('mainContent');
var toggleButton = document.getElementById('toggleSidebarButton');
// update localStorage based on the current state
function updateStorage() {
var isSidebarCollapsed = sidebar.classList.contains('collapsed');
localStorage.setItem('sidebarState', isSidebarCollapsed ? 'collapsed' : 'expanded');
}
// apply saved state
function applySavedState() {
var savedState = localStorage.getItem('sidebarState');
if (savedState === 'collapsed') {
2024-08-05 17:21:34 +00:00
toggleButton.value = ">>";
toggleButton.textContent = ">>";
2024-08-05 16:53:24 +00:00
sidebar.classList.add('collapsed');
mainContent.classList.add('expanded');
} else {
2024-08-05 17:21:34 +00:00
toggleButton.value = "<<";
toggleButton.textContent = "<<";
2024-08-05 16:53:24 +00:00
sidebar.classList.remove('collapsed');
mainContent.classList.remove('expanded');
}
}
// Initialize
applySavedState();
toggleButton.addEventListener('click', function () {
// toggle sidebar and main content
sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('expanded');
2024-08-05 17:21:34 +00:00
// Toggle the value between ">>" and "<<"
if (toggleButton.value === ">>") {
toggleButton.value = "<<";
toggleButton.textContent = "<<";
} else {
toggleButton.value = ">>";
toggleButton.textContent = ">>";
}
2024-08-05 16:53:24 +00:00
// Update with the new state
updateStorage();
});
});