<template>
  <!-- <div class="hambuger-wrapper" :class="{active: isActive}" @click="toggleClick">
      <el-icon size="20">
        <Expand />
      </el-icon>
  </div> -->
  <div class="hambuger-wrapper" @click="toggleClick">
    <img :src="foldPng" style="width: 28px;height: 28px;" :style="{transform: isActive ? '' :'rotate(180deg)'}"/>
  </div>
</template>

<script setup lang="ts">
import foldPng from '@/assets/img/icon/fold.png'
defineProps({
isActive: {
  required: true,
  type: Boolean,
  default: false,
},
});

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

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

<style lang="scss" scoped>
.hambuger-wrapper{
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&:hover{
  background: rgba(0,0,0,.025);
}
}
.active{
transform: rotate(180deg);
}
</style>