//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 menuItem = document.querySelector('.menuItem');
const menuDropdownItems = document.querySelector('.menuDropdownItems');
const angleDown = document.querySelector('.angleDown');
const angleUp = document.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';
});