<script setup lang="ts">
const props = defineProps<{
  sideBarCollapsed: boolean
}>()

const emit = defineEmits<{
  toggleSideBar: []
}>()
</script>
<template>
  <label
    class="dui-btn-ghost dui-btn dui-btn-sm dui-btn-circle relative inline-grid cursor-pointer select-none place-content-center"
  >
    <input type="checkbox" @click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed" />
    <svg
      class="swap-off fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 512 512"
    >
      <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
    </svg>
    <svg
      class="swap-on fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 512 512"
    >
      <polygon
        points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
      />
    </svg>
  </label>
</template>
<style scoped lang="scss">
input {
  appearance: none;
}
label > * {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, opacity;
  grid-column-start: 1;
  grid-row-start: 1;
}
input:checked ~ .swap-off {
  opacity: 0;
  transform: rotate(-45deg);
}

input:checked ~ .swap-on {
  opacity: 1;
  transform: rotate(0deg);
}
.swap-on {
  opacity: 0;
  transform: rotate(45deg);
}
</style>
