<script setup lang="ts">
  const burger = useBurgerStore()
</script>

<template>
  <button class="nav-button"
    @click="burger.toggle()"
  >
        <svg class="hamburger" :class="{ open: burger.checked }"
          viewBox="2 0 100 100">
          <path
            class="cross"
            style="fill:none;
            stroke-linecap:round;
            stroke-linejoin:round;
            stroke-opacity:1"
            d="M 36,21 H 74 L 74,33 55,52 36,71 36,83 H 74 L 74,71 36,33 Z"
            id="path978"
            sodipodi:nodetypes="cccccccccc" />
          <path
            class="middle"
            style="fill:none;
            stroke-linecap:round;
            stroke-linejoin:bevel;
            stroke-opacity:1"
            d="M 36,52 H 74 C 90,52 82,69 77,74 71,80 63,83 55,83 38,83 24,69 24,52 24,35 38,21 55,21 c 17,0 31,14 31,31 0,9 -3,16 -9,22"
            id="path982"
            sodipodi:nodetypes="cccssssc" />
        </svg>
      </button>
    <!-- Panel slide depuis la droite -->
      

</template>

<style scoped lang="scss">
button.nav-button{
    /*centering button*/
    display : block;
    position: absolute;
    bottom:5px;
    right:5px;
    border-radius: 5px;
    /*Formating Button*/
    width:3em;
    background-color:#aaaaaa80;
    border: none;

    transition:1s;
    z-index: 10;
    &:hover{
      cursor: pointer;
    }
    & .hamburger{
      /*Default state*/
      & .cross, & .middle {
      stroke-width:7;
      transition:1s ;
      -moz-transition:1s ;
      -webkit-transition:1s ;
      stroke:black;
      }
      & .cross{
        stroke-dashoffset: 0 ;
        stroke-dasharray: 0 0 36 80 36 80;
      }
      
      & .middle{
        stroke-dashoffset: 0 ;
        stroke-dasharray: 36 250;
      }
      /*Formating "open" state */
      &.open{
        & *{
          stroke:hsl(0, 100%, 30%);
        }
        & .cross{
          stroke-width:7;
          stroke-dashoffset: -61 ;
          stroke-dasharray: 33 82 33 79;
        }
        
        & .middle{
          stroke-width:7;
          stroke-dashoffset: -60 ;
          stroke-dasharray: 270 ;
        }
      }
    }
  }
  // Navigation dans le panel

</style>
