<script src="https://unpkg.com/petite-vue" defer init></script>

<header v-scope="{ isOpen: false }">
  <button
    :aria-expanded="isOpen"
    aria-controls="nav"
    @click="isOpen = !isOpen"
  >
    Menu
  </button>
  
  <nav id="nav" :class="{ 'is-open': isOpen }">
    <ul>
      <li>Lorem ipsum</li>
      <li>Et recusandae</li>
      <li>Quos doloremque</li>
      <li>Amet voluptas</li>
      <li>Id expedita</li>
    </ul>
  </nav>
</header>

body {
  margin: 0;
  font-family: system-ui;
}

button {
  margin: 1rem;
  font: inherit;
}

nav {
  width: fit-content;
  padding: 1rem;
  background: aliceblue;
  
  visibility: hidden;
  transform: translateX(-100%);
  
  transition:
    visibility 0.4s,
    transform 0.4s;
}

nav.is-open {
  visibility: visible;
  transform: translateX(0);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  
  display: grid;
  gap: 0.75rem;
}