<script setup>
import { useBurgerStore } from '@/stores/burger'

const burger = useBurgerStore();

</script>

<template>
  <div>
  <button class="button"
    v-bind:class="{center : !burger.checked}"
    @click="burger.toggle()">
      <svg class="hamburger"
        v-bind:class="{open : burger.checked}"
        viewBox="0 0 100 100">
      
        <path
          class="line-middle"
          style="fill:none;
          stroke-linecap:round;
          stroke-linejoin:round;
          stroke-miterlimit:4;
          stroke-dasharray:none;
          stroke-opacity:1"/>
        <path
          class="arrow-down"
          style="fill:none;
          stroke-width:6;
          stroke-linecap:round;
          stroke-linejoin:round;
          stroke-miterlimit:4;
          stroke-dasharray:none;
          stroke-opacity:1"/>
        <path
          class="arrow-up"
          style="fill:none;
          stroke-width:6;
          stroke-linecap:round;
          stroke-linejoin:round;
          stroke-miterlimit:4;
          stroke-dasharray:none;
          stroke-opacity:1"/>
        <path
          class="line-and-door"
          style="fill:none;
          stroke-linecap:round;
          stroke-linejoin:round;
          stroke-miterlimit:4;
          stroke-dashoffset: 12 ;
          stroke-opacity:1"
          d="m 35 70 v 12 l 38, 0 V 20 H 35 v 12"/>
      </svg>
    </button>
    <!-- <input type="checkbox" class="burger-toggle">
    <label for="burger-toggle" class="burger-menu" @click="burger.toggle()">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </label> -->
    <!-- <h1>{{ burger.checked }}</h1> -->
  </div>    
</template>

<style lang="scss" scoped>
@import "@/style/colors.scss";
@import "@/style/widths.scss";
.button{
  position:absolute;
  top: 0.2em;
  left : -0.5em;
  width: 4.5em;
  background-color:transparent;
  border: none;
  transition:1s ;
  z-index : 2;
  &:hover{
    cursor: pointer;
  }
  
}
.center  {
  left: calc(50% - 2.25em);
  transition:1s ;
}
.line-and-door, .line-middle, .arrow-up, .arrow-down{
  transition:1s ;
  stroke-width:10;
  stroke:$action-normal;
}

.line-and-door{
  stroke-dashoffset: 12 ;
  d:path("m 35 70 v 12 l 38, 0 V 20 H 35 v 12");
  stroke-dasharray: 12 12 38 62 38;
}

.line-middle{
  d:path("M 73, 50 H 35");  
}

.arrow-up, .arrow-down{
  d:path("m 42, 50 15, 0");
}

.hamburger.open{
  & > .arrow-up {
    d:path("m 21, 50 15, -9");
    stroke-width:6;
    stroke:$action-normal;
    
  }
  & > .arrow-down {
    d:path("m 21, 50 15, 9");
    stroke-width:6;
    stroke:$action-normal;
  }
  & > .line-middle{
    d:path("M 65, 50 H 21");
    stroke-width:6;
    stroke:$action-normal;
  }
  & > .line-and-door{
    stroke-dashoffset: 0 ;
    d:path("m 42 70 v 12 l 38, 0 V 20 H 42 v 12");
    //stroke-dasharray: 12 12 38 62 38;
    stroke-width:6;
    stroke-dasharray: 205 ;
    stroke:$action-normal;
  }
}
@media (min-width:$maxWidth){
  .button{
    left:calc((50% - 2.25em) - 550px);
    //transform: rotate(180deg);
    
  }
  .button.center{
  left: calc(50% - 2.25em);
  }
}

</style>