
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

<style>

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root{

    --nav-primary: 0, 0%, 60%;

    --nav-height: 4rem;

}



body{

    overflow-x: hidden;

}



/* Header */



header{

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    height: var(--nav-height);

    z-index: 5;

}



nav{

    position: relative;

    width: 100%;

    height: 100%;

}



nav::before{

    content: "";

    display: block;

    width: 100%;

    height: 100%;  

    background-color: hsl(var(--nav-primary));  

}

nav::after{

    position: absolute;

    content: "";

    display: block;

    width: 100%;

    height: 2px;

    bottom: 0;

    background-color: hsla(0, 0%, 100%, 0.1);

}



nav .hamburger{

    position: absolute;

    top: 0rem;

    right: 0.5rem;

    aspect-ratio: 10/14;

    height: 100%;

    will-change: transform;

    transform: rotate(0deg);

    transition: transform 0.5s ease-in-out;

}



nav .hamburger.active{

    transform: rotate(-360deg);

}



nav .hamburger>svg{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    transition: opacity 0.5s ease-in-out;

}





nav .hamburger>svg:nth-child(1){ opacity: 1;}

nav .hamburger.active>svg:nth-child(1){ opacity: 0;}

nav .hamburger>svg:nth-child(2){ opacity: 0;}

nav .hamburger.active>svg:nth-child(2){ opacity: 1;}



nav .hamburger, nav li{

    cursor: pointer;

}



nav ul{

    position: absolute;

    display: flex;

    flex-direction: column;

    list-style: none;

    opacity: 0;

}



nav ul, nav::before{

    will-change: transform;

    transition: transform 0.3s ease-in-out;

    transform: translateX(100%);

}



nav .hamburger.active+ul,nav h5.active+ul, nav:has(.hamburger.active)::before{

    transform: translateX(0%);

}



nav li{

    padding-left: 1rem;

    font-size: 1.5rem;

}



nav li h5.active+ul, nav .hamburger+ul{

    position: relative;

    opacity: 1;

}



nav li>h5,nav li:not(:has(h5)){

    position: relative;

    height: 3rem;

    width: 100%;

    display: flex;

    align-items: center;

}



nav li:not(:last-child){

    position: relative;

}

nav li:not(:last-child)::after{

    position: absolute;

    content: "";

    display: block;

    width: 100%;

    height: 2px;

    bottom: 0;

    background-color: hsla(0, 0%, 100%, 0.1);

}



@media screen and (min-width: 768px) {

    :root{

        --nav-height: 3rem;

    }

    nav .hamburger{

        display: none;

    }

    nav::before,nav::after{

        display: none;

    }

    nav>ul:first-of-type{

        position: relative;

        flex-direction: row;

        justify-content: center;

        gap: 2rem;

        top: 0;

        display: flex;

    }

    nav li{

        padding-left: 0;

        width: 6rem;

        text-align: center;

        transition: background-color 0.3s ease-in-out;

        position: relative;

    }

    nav li:hover{        

        background-color: hsla(0, 0%, 100%, 0.2);

    }

    nav li:hover>ul{

        display: flex;

    }

    nav li h5{

        justify-content: center;

    }

    nav ul{

        transform: initial;

        display: none;

        opacity: 1;

        position: absolute;

        top: var(--nav-height);

        left: 0;

        min-height: var(--nav-height);

        width: 100%;

    }



    nav ul ul {

        width: 125%;

    }

    nav ul ul li{

        padding-left: 1rem;

        width: 100%;

    }

    nav ul ul li h5{

        justify-content: flex-start;

    }

    nav ul ul ul{

        top: 0;

        left: 100%;

    }

    

}

    </style>

    <header>

        <nav>

            <div class="hamburger">

                <svg viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(0)matrix(1, 0, 0, 1, 0, 0)">

                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>

                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>

                    <g id="SVGRepo_iconCarrier"> 

                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H4ZM7 12C7 11.4477 7.44772 11 8 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H8C7.44772 13 7 12.5523 7 12ZM13 18C13 17.4477 13.4477 17 14 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14C13.4477 19 13 18.5523 13 18Z" fill="#000000"></path>

                    </g>

                </svg>



                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>

                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>

                    <g id="SVGRepo_iconCarrier"> 

                        <g id="Menu / Close_MD"> 

                            <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 

                        </g> 

                    </g>

                </svg>

            </div>

            <ul>

                <li>

                    <h5>Menu 1</h5>

                    <ul>

                        <li>Point 1</li>

                        <li>Point 2</li>

                    </ul>

                </li>

                <li>

                    <h5>Menu 2</h5>

                    <ul>

                        <li>Point 1</li>

                        <li>Point 2</li>

                    </ul>

                </li>

                <li>

                    <h5>Menu 3</h5>

                    <ul>

                        <li>Point 1</li>

                        <li>

                            <h5>Menu 4</h5>

                            <ul>

                                <li>Point 1</li>

                                <li>Point 2</li>

                            </ul>

                        </li>

                    </ul>

                </li>

            </ul>

        </nav>

        

    </header>

<script src="script.js">

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);

</script>

</script>

</body>

</html>