<script setup lang="ts">
import IconHamburger from "@/assets/images/hamburger.svg?component";
import { navItems } from "@/data/navItems";
</script>

<template>
  <div class="hamburger">
    <input class="checkbox" type="checkbox" id="checkbox" />
    <label class="checkbox-label" for="checkbox">
      <svg class="ham ham-rotate" viewBox="0 0 100 100" width="60">
        <path
          class="line top"
          d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40"
        />
        <path class="line middle" d="m 30,50 h 40" />
        <path
          class="line bottom"
          d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40"
        />
      </svg>
    </label>
    <div class="drawer">
      <li v-for="(item, index) in navItems" :key="index">
        <a :href="item.href">{{ item.title }}</a>
      </li>
    </div>
  </div>
</template>

<style scoped>
input.checkbox {
  outline: none;
  width: 0;
  opacity: 0;
}

input.checkbox ~ .drawer {
  opacity: 0;
  position: absolute;
  transform: scale(0);
}

input.checkbox:checked ~ .drawer,
.drawer:hover {
  /** input.checkbox:focus:not(:checked) ~ .drawer,
    * input.checkbox:hover ~ .drawer,
    *
    * play with focus to make it so that you can click outside
    * of the hamburger to close it
    * problem with focus is that pressing the menu again doesn't close it
    * also so that you can hover over it to open it — these are
    * surprisingly annoying
    */
  opacity: 1;
  transform: scale(1) translateY(3rem);
}

.drawer {
  transition: transform var(--trans), opacity var(--trans);
  padding: 1rem;
  margin-right: 1rem;
  background: white;
  border: 1px solid gray;
}

/* hamburger animation */

.ham {
  cursor: pointer;
  transition: transform 400ms;
  user-select: none;
  height: 3.75rem;
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #000;
  stroke-width: 5.5;
  stroke-linecap: round;
}
.ham .top {
  stroke-dasharray: 40 139;
}
.ham .bottom {
  stroke-dasharray: 40 180;
}
input.checkbox:checked ~ label.checkbox-label .ham .top {
  stroke-dashoffset: -98px;
}
input.checkbox:checked ~ label.checkbox-label .ham .bottom {
  stroke-dashoffset: -138px;
}

input.checkbox:checked ~ label.checkbox-label .ham-rotate {
  transform: rotate(45deg);
}
</style>
