<template>
  <span
    class="fold-wrapper iconfont"
    :class="[store.state.isCollapse ? 'fold-close-status' : 'fold-open-status']"
    @click="toggleFold"
  >
    <SvgIcon name="expand" />
  </span>
</template>

<script  setup>
  import { useLayoutStore } from '@/components/skeleton/index.js'
  import SvgIcon from '@/components/skeleton/svg-icon/index.vue'
  const store = useLayoutStore()
  function toggleFold() {
    store?.toggleCollapse(!store.state.isCollapse)
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/styles/variables';
  .fold-open-status {
    transform: rotate(180deg);
  }
  .fold-close-status {
    transform: rotate(0);
  }
  .fold-wrapper {
    box-sizing: border-box;
    display: inline-block;
    line-height: $logoHeight;
    text-align: center;
    padding: 0 10px;
    font-size: 22px;
    transition: transform $transitionTime;
  }
  .fold-wrapper:hover {
    color: #999999;
    cursor: pointer;
  }
</style>
