css.md

Slide mode

Html

<script>
    const toggleNav = () => {
        document.body.dataset.nav = document.body.dataset.nav === "true" ? "false" : "true"
    }
</script>
<body data-nav="false">
<main></main>
    <nav id="nav">
        <div id="nav-links">
            <a href="#" class="nav-link">
                <h2 class="nav-link-label rubik-font">
                    Home
                </h2>
                <img class="nav-link-image" src="pz0zkwko.jpg"
                    alt="">
            </a>
          ……
<button id="nav-toggle" type="button" onclick="toggleNav()">
        <i class="open fa-light fa-bars-staggered">=</i>
        <i class="close fa-light fa-xmark-large">X</i>
</button> 
</body>

CSS hover effect

body:not([data-nav="true"])>#nav-toggle:hover>.open {
    opacity: 1;
    transform: translate(-80%, -50%) scale(1);
}