project nearly finished. TODO Next : Project page and refine some text

2023-05-29 19:50:07 +02:00
parent 3be7a4adfd
commit ff3ea2cdcd
62 changed files with 6197 additions and 1313 deletions
--- a/src/components/Burger.vue
+++ b/src/components/Burger.vue
@@ -0,0 +1,140 @@
+<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/shared.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:$green;
+}
+
+.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:$green;
+    
+  }
+  & > .arrow-down {
+    d:path("m 21, 50 15, 9");
+    stroke-width:6;
+    stroke:$green;
+  }
+  & > .line-middle{
+    d:path("M 65, 50 H 21");
+    stroke-width:6;
+    stroke:$green;
+  }
+  & > .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:$green;
+  }
+}
+@media (min-width:$maxWidth){
+  .button{
+    left:calc((50% - 2.25em) - 550px);
+    //transform: rotate(180deg);
+    
+  }
+  .button.center{
+  left: calc(50% - 2.25em);
+  }
+}
+
+</style>