<template>
  <div
    @click="toggleClick"
    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] text-center fixed bottom-2 "
    style="z-index:1005;display: flex;display: -webkit-flex; justify-content: center; align-items: center; -webkit-justify-content: center; -webkit-align-items: center;"
    :style="appStore.sidebar.opened?'left:80px': 'left:2px'"
  >
  <img v-if="isActive" src="@/assets/MenuIcon/dh_sq.png" alt="">
  <img v-else src="@/assets/MenuIcon/dh_sq1.png" alt="">
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();
defineProps({
  isActive: {
    required: true,
    type: Boolean,
    default: false
  }
});

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

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

<style scoped>
.hamburger {
  width: 20px;
  height: 20px;
  fill: #409eff;
}

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