message: animate the nav toggle.
diff: <style lang="postcss">
  button {
  + &::before,
  + &::after {
  + content: "";
  + @apply h-0.5 w-4 rounded-[2px] bg-[#f4f2f1] origin-center transition-all duration-200 ease-out;
  + }
  +
  + &::before {
  + @apply mb-1;
  + }
  +
  + &.open {
  + &::before,
  + &::after {
  + @apply bg-[#565252];
  + }
  +
  + &:before {
  + transform: rotate(-135deg);
  + @apply -mb-0.5;
  + }
  +
  + &::after {
  + transform: rotate(135deg);
  + }
  + }
  +
  @media (min-width: 1090px) {
  @apply hidden;
  }
  <button
  on:click={handleToggle}
  aria-label="Show / hide nav items"
  - class="flex justify-center items-center h-6 w-12 rounded-xl transition-all duration-200 {$menuState
  + class="flex flex-col items-center justify-center h-6 w-12 rounded-xl transition-all duration-200 {$menuState
  ? 'bg-sand-dark'
  : 'bg-black'}"
  ->
  - {#if $menuState}
  - <svg
  - xmlns="http://www.w3.org/2000/svg"
  - fill="none"
  - width="12"
  - height="12"
  - viewBox="0 0 12 12"
  - >
  - <path
  - fill={$menuState ? "#12100cb3" : "#F3F1F0"}
  - fill-rule="evenodd"
  - d="M10.242 11.657a1 1 0 001.414-1.414L7.413 6l4.243-4.243A1 1 0 0010.242.343L5.999 4.586 1.757.343A1 1 0 10.342 1.757L4.585 6 .342 10.243a1 1 0 001.415 1.414l4.242-4.243 4.243 4.243z"
  - clip-rule="evenodd"
  - />
  - </svg>
  - {:else}
  - <svg
  - width="16"
  - height="8"
  - viewBox="0 0 16 8"
  - fill="none"
  - xmlns="http://www.w3.org/2000/svg"
  - >
  - <rect
  - width="16"
  - height="2"
  - rx="1"
  - fill={$menuState ? "#12100cb3" : "#F4F2F1"}
  - />
  - <rect
  - y="6"
  - width="16"
  - height="2"
  - rx="1"
  - fill={$menuState ? "#12100cb3" : "#F3F1F0"}
  + class:open={$menuState}
  />
  - </svg>
  - {/if}
  -</button>
  