<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/store/app'
import { storeToRefs } from 'pinia'

defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['toggle-click'])
const appStore = useAppStore()
const { sidebar } = storeToRefs(appStore)

const isCollapse = computed(() => {
  return !sidebar.value.opened
})

const toggleClick = () => {
  emit('toggle-click')
}
</script>

<template>
  <div class="hamburger-container" @click="toggleClick">
    <el-icon :class="{'is-active': isCollapse}" class="hamburger-icon">
      <Menu />
    </el-icon>
  </div>
</template>

<style lang="scss" scoped>
.hamburger-container {
  padding: 0 15px;
  height: 100%;
  float: left;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }

  .hamburger-icon {
    font-size: 20px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    
    &.is-active {
      transform: rotate(90deg);
    }
  }
}
</style>
