mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-25 02:46:39 +07:00
67 lines
1.2 KiB
Vue
67 lines
1.2 KiB
Vue
<template>
|
|
<button :class="[$attrs.class, $style.button]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
fill="#ffffff"
|
|
:class="[$style.hamburger, { [$style.active]: active }]"
|
|
>
|
|
<rect x="0" y="3" width="24" height="2" />
|
|
<rect x="0" y="11" width="24" height="2" />
|
|
<rect x="0" y="19" width="24" height="2" />
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
interface Props {
|
|
active?: boolean;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.hamburger {
|
|
fill: var(--color-text);
|
|
cursor: pointer;
|
|
transition: all 250ms;
|
|
|
|
&:hover {
|
|
fill: var(--color-link);
|
|
}
|
|
|
|
& > rect {
|
|
transition: transform 250ms;
|
|
}
|
|
|
|
&.active {
|
|
& > rect:nth-child(1) {
|
|
transform: rotate(45deg);
|
|
transform-origin: 2px 8px;
|
|
}
|
|
|
|
& > rect:nth-child(2) {
|
|
transform: scaleX(0);
|
|
transform-origin: 13px 0;
|
|
transition-delay: 100ms;
|
|
}
|
|
|
|
& > rect:nth-child(3) {
|
|
transform: rotate(-45deg);
|
|
transform-origin: 3px 16px;
|
|
transition-delay: 50ms;
|
|
}
|
|
}
|
|
}
|
|
</style>
|