76 lines
2.7 KiB
JavaScript
76 lines
2.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const toggleIcon = document.getElementById('toggle-icon');
|
|
const logo = document.getElementById('logo');
|
|
const menuTextElements = document.querySelectorAll('.menu-text');
|
|
const content = document.getElementById('content');
|
|
|
|
const enableActiveHover = () => {
|
|
const activeMenu = document.querySelector('.bg-pewterBlue');
|
|
if (activeMenu) {
|
|
activeMenu.classList.add('hover:bg-pewterBlue', 'hover:text-white');
|
|
}
|
|
};
|
|
|
|
const initializeSidebar = () => {
|
|
if (sidebar.classList.contains('w-72')) {
|
|
logo.classList.remove('hidden');
|
|
toggleIcon.querySelector('i').classList.add('fa-chevron-left');
|
|
toggleIcon.querySelector('i').classList.remove('fa-chevron-right');
|
|
|
|
menuTextElements.forEach((menuText, index) => {
|
|
setTimeout(() => {
|
|
menuText.classList.add('visible');
|
|
}, index * 50);
|
|
});
|
|
|
|
if (content) content.style.marginLeft = '18rem';
|
|
} else {
|
|
logo.classList.add('hidden');
|
|
toggleIcon.querySelector('i').classList.add('fa-chevron-right');
|
|
toggleIcon.querySelector('i').classList.remove('fa-chevron-left');
|
|
|
|
menuTextElements.forEach((menuText) => {
|
|
menuText.classList.remove('visible');
|
|
});
|
|
|
|
if (content) content.style.marginLeft = '5rem';
|
|
}
|
|
|
|
enableActiveHover();
|
|
};
|
|
|
|
initializeSidebar();
|
|
|
|
toggleIcon.addEventListener('click', function () {
|
|
sidebar.classList.toggle('w-72');
|
|
sidebar.classList.toggle('w-20');
|
|
|
|
if (sidebar.classList.contains('w-20')) {
|
|
logo.classList.add('hidden');
|
|
toggleIcon.querySelector('i').classList.remove('fa-chevron-left');
|
|
toggleIcon.querySelector('i').classList.add('fa-chevron-right');
|
|
|
|
menuTextElements.forEach((menuText) => {
|
|
menuText.classList.remove('visible');
|
|
});
|
|
|
|
if (content) content.style.marginLeft = '5rem';
|
|
} else {
|
|
logo.classList.remove('hidden');
|
|
toggleIcon.querySelector('i').classList.remove('fa-chevron-right');
|
|
toggleIcon.querySelector('i').classList.add('fa-chevron-left');
|
|
|
|
menuTextElements.forEach((menuText, index) => {
|
|
setTimeout(() => {
|
|
menuText.classList.add('visible');
|
|
}, index * 50);
|
|
});
|
|
|
|
if (content) content.style.marginLeft = '18rem';
|
|
}
|
|
|
|
enableActiveHover();
|
|
});
|
|
});
|