<template>
  <div class="hamburger" @click="toggleClick">
    <img
      v-if="isActive"
      src="@/assets/images/fold.png"
    >
    <img
      v-if="!isActive"
      src="@/assets/images/unfold.png"
      alt=""
    >
  </div>
</template>

<script setup lang="ts">
defineProps({
  isActive: {
    required: true,
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['toggleClick']);

function toggleClick() {
  emit('toggleClick');
}
</script>

<style scoped lang="scss">
.hamburger {
  width: 8px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-20px);
  cursor: pointer;
  z-index: 4;
  img{
    width: 100%;
    height: 100%;
  }
}


</style>
