94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<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>
|