62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
const sidebar = document.getElementById("sidebar");
|
|
const main = document.getElementById("main");
|
|
|
|
// Track toggle manually
|
|
let isSidebarOpen = true;
|
|
|
|
// Toggle sidebar normally
|
|
function toggleSidebar() {
|
|
isSidebarOpen = !isSidebarOpen;
|
|
|
|
sidebar.classList.toggle("hide", !isSidebarOpen);
|
|
|
|
// Add temporary transition only during toggle
|
|
main.style.transition = "margin-left 0.3s ease";
|
|
sidebar.style.transition = "left 0.3s ease";
|
|
|
|
// Adjust main margin
|
|
main.style.marginLeft = isSidebarOpen ? "260px" : "20px";
|
|
|
|
// Remove transitions after animation to avoid disturbance
|
|
setTimeout(() => {
|
|
main.style.transition = "none";
|
|
sidebar.style.transition = "none";
|
|
}, 300);
|
|
}
|
|
|
|
// Toggle submenu — also force sidebar to open if it is hidden
|
|
function toggleMenu(id) {
|
|
const menu = document.getElementById(id);
|
|
if (!menu) return;
|
|
|
|
// 👉 If sidebar is collapsed, open it automatically
|
|
if (!isSidebarOpen) {
|
|
isSidebarOpen = true;
|
|
sidebar.classList.remove("hide");
|
|
main.style.marginLeft = "260px";
|
|
}
|
|
|
|
// Close all other submenus
|
|
document.querySelectorAll(".submenu").forEach(sm => {
|
|
if (sm !== menu) sm.style.display = "none";
|
|
});
|
|
|
|
// Toggle the clicked submenu instantly
|
|
menu.style.display = menu.style.display === "block" ? "none" : "block";
|
|
}
|
|
|
|
// Remove transition when clicking submenu links
|
|
document.querySelectorAll(".submenu a").forEach(link => {
|
|
link.addEventListener("click", () => {
|
|
main.style.transition = "none";
|
|
sidebar.style.transition = "none";
|
|
});
|
|
});
|
|
|
|
// Initialize sidebar as open when page loads
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
sidebar.classList.remove("hide");
|
|
main.style.marginLeft = "260px";
|
|
isSidebarOpen = true;
|
|
});
|