const menuPoints = document.querySelectorAll("nav ul li:has(ul) h5, .hamburger"); // Gets all clickable elements in the menu
const rootStyles = getComputedStyle(document.documentElement); // Gets the root element
const navPrimary = rootStyles.getPropertyValue('--nav-primary'); // Gets the primary color from the root element
const initalUl = document.querySelector('nav>ul'); // Gets the first ul element in the menu

const [hue, saturation, lightness] = navPrimary.split(',').map(value => parseInt(value.trim())); // Splits the primary color into hue, saturation and lightness

menuPoints.forEach((menuPoint) => { // Adds an event listener to all clickable elements in the menu
    menuPoint.addEventListener("click", () => {
        menuPoint.classList.toggle("active");
    });
});

function applySaturation(element, level){ // Applies a waterfall effect brightness to the under menus
    let output = "hsl(" + hue + ", " + saturation + "%, " + (lightness + (level * ((100 - lightness) / 4))) + "%)";
    element.style.backgroundColor = output;
    element.querySelectorAll(":scope > li > ul").forEach((ul) => { 
        if (level >= 4){
            applySaturation(ul, level);
        } 
        else{
            applySaturation(ul, level + 1);
        }        
    });
}

applySaturation(initalUl, 0);