const menuPoints = document.querySelectorAll("nav ul li:has(ul) h5, .hamburger");
const rootStyles = getComputedStyle(document.documentElement);
const navPrimary = rootStyles.getPropertyValue('--nav-primary');
const initalUl = document.querySelector('nav>ul');

const [hue, saturation, lightness] = navPrimary.split(',').map(value => parseInt(value.trim()));

menuPoints.forEach((menuPoint) => {
    menuPoint.addEventListener("click", () => {
        menuPoint.classList.toggle("active");
    });
});

function applySaturation(element, level){
    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);