A mockup hamburger menu.

Hamburger.svelte

<script lang="ts">
    let showHamburger = false;
    
    const toggleHamburger = () => {
        showHamburger = !showHambuger;
    };
</script>

<div class="h-screen flex flex-col justify-center items-center content-evenly gap-y-4">
    <button on:click={toggleHamburger}>
        <svg
            viewBox="0 0 100 100"
            width="60"
            class="hamburger"
            data-show-hamburger={showHamburger}
         >
            <rect></rect>
            <rect></rect>
            <rect></rect>
        </svg>
    </button>
    
    <div
        class="grid transition-all ease-in-out duration-300 max-w-lg"
        style="grid-template-rows: {showHamburger ? "1fr" : "0fr"}"
    >
        <div class="overflow-y-hidden text-lg"
            <p>
                This is a hamburger menu.
            </p>
            <p>
                It probably contains a list of links.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, atque.</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam dolor totam tempora debitis vitae culpa!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

<style lang="postcss">
    svg.hamburger {
        & rect {
            width: 80px;
            height: 10px;
            x: 10;
            rx: 5;
            fill: black;
            transform-origin: center;
            transition: all 300ms ease-in-out;
            
            &:nth-of-type(1) {
                y: 25;
            }
            
            &:nth-of-type(2) {
                y: 45;
            }
            
            &:nth-of-type(3) {
                y: 65;
            }
        }
        
        &[data-show-hamburger=true] {
            & rect {
                &:nth-of-type(1) {
                    y: 45;
                    rotate: 45deg;
                }
                
                &:nth-of-type(2) {
                    x: 45;
                    width: 10px;
                }
                
                &:nth-of-type(3) {
                    y: 45;
                    rotate: -45deg;
                }
            }
        }
    }
</style>