initial

components/layout/LayoutMainMenuToggle.vue

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