Burger with animation Vue3

gistfile1.md

This is a basic Burger Menu, which will animate to a X
Set your desired with through the css var --width

<script setup lang="ts">
defineProps<{
  isOpen?: boolean
}>()
const emit = defineEmits(['toggle'])

function toggle() {
  emit('toggle')
}
</script>

<template>
  <div class="menu-icon" :class="{ change: isOpen }" @click="toggle()">
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<style scoped>
.menu-icon {
  --width: 1em;

  cursor: pointer;
  width: var(--width);
  height: var(--width);
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  span {
    display: block;
    height: calc(var(--width) / 10);
    width: 100%;
    background: var(--main-color);
    transition: all ease-in 0.3s;
  }
}

.change {
  span:nth-child(1) {
    transform: rotate(45deg) translate(calc(var(--width) / 5), calc(var(--width) / 3.5));
  }
  span:nth-child(2) {
    opacity: 0;
  }
  span:nth-child(3) {
    transform: rotate(-45deg) translate(calc(var(--width) / 6), calc(var(--width) / -3.5));
  }
}
</style>