140 lines
3.0 KiB
Vue
140 lines
3.0 KiB
Vue
<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> |