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.
98 lines
3.5 KiB
JavaScript
98 lines
3.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const fixedSideHeader = document.getElementById('fixedSideHeader');
|
|
const scrollPart = document.getElementById('scrollPart');
|
|
const burgerMenuButton = document.getElementById('burgerMenuButton');
|
|
const burgerMenuLines = document.querySelectorAll('.burgerMenuLine');
|
|
const closeMenuButton = document.getElementById('closeMenuButton');
|
|
const closeMenuLines = document.querySelectorAll('.closeMenuLine');
|
|
|
|
function toggleSideHeader() {
|
|
const computedStyle = getComputedStyle(fixedSideHeader);
|
|
const isHidden = computedStyle.display === 'none';
|
|
|
|
if (isHidden) {
|
|
fixedSideHeader.style.display = 'block';
|
|
|
|
burgerMenuButton.classList.add('flex-col');
|
|
burgerMenuButton.classList.remove('flex-row');
|
|
|
|
burgerMenuLines.forEach((line) => {
|
|
line.classList.remove('expanded');
|
|
});
|
|
|
|
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.remove('flex-1');
|
|
scrollPart.classList.remove('ml-[300px]');
|
|
scrollPart.classList.add('w-full');
|
|
}
|
|
}
|
|
|
|
function toggleCloseMenu() {
|
|
const computedStyle = getComputedStyle(fixedSideHeader);
|
|
const isHidden = computedStyle.display === 'none';
|
|
|
|
if (isHidden) {
|
|
fixedSideHeader.style.display = 'block';
|
|
|
|
closeMenuButton.classList.add('flex-col');
|
|
closeMenuButton.classList.remove('flex-row');
|
|
|
|
closeMenuLines.forEach((line) => {
|
|
line.classList.add('expanded');
|
|
});
|
|
|
|
scrollPart.classList.remove('w-full');
|
|
scrollPart.classList.add('flex-1');
|
|
scrollPart.classList.add('ml-[300px]');
|
|
} else {
|
|
fixedSideHeader.style.display = 'none';
|
|
|
|
closeMenuButton.classList.remove('flex-col');
|
|
closeMenuButton.classList.add('flex-row');
|
|
|
|
closeMenuLines.forEach((line) => {
|
|
line.classList.remove('expanded');
|
|
});
|
|
|
|
scrollPart.classList.remove('flex-1');
|
|
scrollPart.classList.remove('ml-[300px]');
|
|
scrollPart.classList.add('w-full');
|
|
}
|
|
}
|
|
|
|
burgerMenuButton.addEventListener('click', toggleSideHeader);
|
|
closeMenuButton.addEventListener('click', toggleCloseMenu);
|
|
});
|
|
|
|
|
|
|
|
// 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';
|
|
});
|
|
});
|
|
|