<template>
  <div style="padding: 0 15px" @click="toggleClick">
    <div :class="{ 'is-active': isActive }" class="hamburger" />
  </div>
</template>

<script setup>
import { propTypes } from '@/utils/propTypes';

defineProps({
  isActive: propTypes.bool.def(false)
});

const emit = defineEmits(['toggleClick']);
const toggleClick = () => {
  emit('toggleClick');
};
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 21px;
  height: 14px;
  background: url('@/assets/images/hamburger.png') no-repeat;
  background-size: 100% 100%;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
