floating-nav-pirati-stan.mustache

<div class="floating-nav-panel">
    <div class="opener py-6 px-11 bg-acidgreen text-white font-alt" id='nav-opener'>
        RYCHLÁ NAVIGACE
    </div>
    <div class="inner float-panel-inner elevation-2">
        <ul>
            <li>Problem</li>
            <li>Ideal</li>
            <li>Benefity</li>
        </ul>
    </div>
</div>

<style>
    .floating-nav-panel {
        position: fixed;
        right: 300px;
        top: 160px;
    }

    .floating-nav-panel .opener {
      width: max-content;
      cursor: pointer;
      font-size: 20px;
    }

    .floating-nav-panel .inner {
        width: 344px;
        padding: 30px;
        position: absolute;
        display: none;
    }
    .floating-nav-panel .inner ul {
        list-style-type: none;
    }

    .floating-nav-panel .inner ul li {
        padding-top: 15px;
        padding-bottom: 15px;
        color: #4C4C4C;
        cursor: pointer;
        font-size: 16px;
    }

    .floating-nav-panel .inner ul li:hover{
        color: black;
        font-weight: bold;
    }
</style>

<script>
window.addEventListener('load', function () {
    let state = 0;

    document.querySelector("#nav-opener").addEventListener("click", event => {
        let element = document.querySelector(".float-panel-inner");
        if(state === 0) {
            element.style.display = "flex";
            state = 1;
        }else {
            element.style.display = "none";
            state = 0;
        }
    });
})
</script>