84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const content = document.getElementById('content');
|
|
const sidebarCollapse = document.getElementById('sidebarCollapse');
|
|
const sidebarCollapseMobile = document.getElementById('sidebarCollapseMobile');
|
|
const overlay = document.getElementById('overlay');
|
|
const backToTop = document.getElementById('back-to-top');
|
|
|
|
// Sidebar Toggle for Mobile (Header button)
|
|
if (sidebarCollapseMobile) {
|
|
sidebarCollapseMobile.addEventListener('click', function () {
|
|
toggleMobileSidebar();
|
|
});
|
|
}
|
|
|
|
// Sidebar Toggle for Desktop (Content button)
|
|
if (sidebarCollapse) {
|
|
sidebarCollapse.addEventListener('click', function () {
|
|
if (window.innerWidth > 768) {
|
|
sidebar.classList.toggle('collapsed');
|
|
content.classList.toggle('expanded');
|
|
// Change icon
|
|
const icon = sidebarCollapse.querySelector('i');
|
|
if (sidebar.classList.contains('collapsed')) {
|
|
icon.className = 'bi bi-text-indent-right';
|
|
} else {
|
|
icon.className = 'bi bi-text-indent-left';
|
|
}
|
|
} else {
|
|
toggleMobileSidebar();
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggleMobileSidebar() {
|
|
sidebar.classList.toggle('active');
|
|
if (sidebar.classList.contains('active')) {
|
|
overlay.style.display = 'block';
|
|
document.body.style.overflow = 'hidden'; // Prevent scroll
|
|
} else {
|
|
overlay.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
}
|
|
|
|
// Close sidebar when clicking overlay
|
|
if (overlay) {
|
|
overlay.addEventListener('click', function () {
|
|
sidebar.classList.remove('active');
|
|
overlay.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
});
|
|
}
|
|
|
|
// Back to Top functionality
|
|
window.addEventListener('scroll', function () {
|
|
if (window.scrollY > 300) {
|
|
backToTop.style.display = 'block';
|
|
} else {
|
|
backToTop.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
if (backToTop) {
|
|
backToTop.addEventListener('click', function () {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// Resize handler to clean up states
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth > 768) {
|
|
sidebar.classList.remove('active');
|
|
if (overlay) overlay.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
} else {
|
|
sidebar.classList.remove('collapsed');
|
|
content.classList.remove('expanded');
|
|
}
|
|
});
|
|
}); |