initial commit

app/components/button/burger.vue

@@ -0,0 +1,93 @@
+<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>