---
// code taken from here
// thank you Author: Mikael Ainalem
// https://www.sliderrevolution.com/resources/css-hamburger-menu/

interface Props {
    width: number,
    height: number,
}

const { width, height } = Astro.props;
---

<!-- thank you Mikael Ainalem for this really cool hamburger menu -->
<svg class="ham hamRotate ham8" viewBox="0 0 100 100" width={width} height={height} onclick="this.classList.toggle('active')">
    <path
          class="line top"
          d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
    <path
          class="line middle"
          d="m 30,50 h 40" />
    <path
          class="line bottom"
          d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
</svg>


<style>
    .ham {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 400ms;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .hamRotate.active {
        transform: rotate(45deg);
    }
    
    .ham8 .top {
        stroke-dasharray: 40 160;
    }
    
    .ham8 .middle {
        stroke-dasharray: 40 142;
        transform-origin: 50%;
        transition: transform 400ms, stroke 500ms ease;
    }
    
    .ham8 .bottom {
        stroke-dasharray: 40 85;
        transform-origin: 50%;
        transition: transform 400ms, stroke-dashoffset 400ms, stroke 500ms ease;
    }
    
    .ham8.active .top {
        stroke-dashoffset: -64px;
        stroke: var(--accent);

    }
    
    .ham8.active .middle {
        transform: rotate(90deg);
        stroke: var(--accent);

    }

    .ham8.active .bottom {
        stroke-dashoffset: -64px;
        stroke: var(--accent);
    }

    .line {
        fill:none;
        transition: 
        stroke-dasharray 400ms, 
        stroke-dashoffset 400ms,
        stroke 500ms ease;
        stroke: var(--text-color);
        stroke-width: 4;
        stroke-linecap:round;
    }
</style>