You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
//TO OPEN AND CLOSE THE SIDE BAR + ADDING ANIMATION TO THE BURGER MENU BUTTON
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// This code will run when the DOM is fully loaded
|
|
const fixedSideHeader = document.getElementById('fixedSideHeader');
|
|
const scrollPart = document.getElementById('scrollPart');
|
|
const burgerMenuButton = document.getElementById('burgerMenuButton');
|
|
const burgerMenuLines = document.querySelectorAll('.burgerMenuLine');
|
|
|
|
function toggleSideHeader() {
|
|
if (fixedSideHeader.style.display === 'none') {
|
|
fixedSideHeader.style.display = 'block';
|
|
|
|
burgerMenuButton.classList.add('flex-col');
|
|
burgerMenuButton.classList.remove('flex-row');
|
|
|
|
burgerMenuLines.forEach((line) => {
|
|
line.classList.remove('expanded');
|
|
});
|
|
|
|
// scrollPart.classList.add('duration-1000');
|
|
scrollPart.classList.remove('w-full');
|
|
scrollPart.classList.add('flex-1');
|
|
scrollPart.classList.add('ml-[300px]');
|
|
} else {
|
|
fixedSideHeader.style.display = 'none';
|
|
|
|
burgerMenuButton.classList.remove('flex-col');
|
|
burgerMenuButton.classList.add('flex-row');
|
|
|
|
burgerMenuLines.forEach((line) => {
|
|
line.classList.add('expanded');
|
|
});
|
|
|
|
// scrollPart.classList.add('duration-1000');
|
|
scrollPart.classList.remove('flex-1');
|
|
scrollPart.classList.remove('ml-[300px]');
|
|
scrollPart.classList.add('w-full');
|
|
}
|
|
}
|
|
|
|
burgerMenuButton.addEventListener('click', toggleSideHeader);
|
|
});
|
|
|
|
|
|
// SCRIPT FOR THE SIDEBAR MENU ITEMS
|
|
const menuContainers = document.querySelectorAll('.menu-container');
|
|
|
|
// Add click event listeners to each menu container
|
|
menuContainers.forEach((menuContainer) => {
|
|
const menuItem = menuContainer.querySelector('.menuItem');
|
|
const menuDropdownItems = menuContainer.querySelector('.menuDropdownItems');
|
|
const angleDown = menuItem.querySelector('.angleDown');
|
|
const angleUp = menuItem.querySelector('.angleUp');
|
|
|
|
menuItem.addEventListener('click', function () {
|
|
menuDropdownItems.classList.toggle('hidden');
|
|
angleDown.style.display = angleDown.style.display === 'none' ? 'inline' : 'none';
|
|
angleUp.style.display = angleUp.style.display === 'none' ? 'inline' : 'none';
|
|
});
|
|
});
|
|
|