Animated hamburger / close toggle button

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const open = ref(false)
</script>

<template>
  <Button
    size="icon"
    variant="outline"
    :aria-label="open ? 'Close menu' : 'Open menu'"
    :aria-expanded="open"
    @click="open = !open"
  >
    <span class="relative flex size-4 items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
        :class="cn('absolute size-4 transition-all duration-200', open ? 'scale-75 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100')"
        class="lucide lucide-menu"
      >
        <path d="M4 5h16" />
        <path d="M4 12h16" />
        <path d="M4 19h16" />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
        :class="cn('absolute size-4 transition-all duration-200', open ? 'scale-100 rotate-0 opacity-100' : 'scale-75 -rotate-90 opacity-0')"
        class="lucide lucide-x"
      >
        <path d="M18 6 6 18" />
        <path d="m6 6 12 12" />
      </svg>
    </span>
  </Button>
</template>