daimp-front/sub-government-affairs-service/src/layouts/component/Hamburger/index.vue

<!--
 * @Description: 
 * @Author: zenghua.wang
 * @Date: 2023-06-20 14:29:45
 * @LastEditors: zenghua.wang
 * @LastEditTime: 2024-01-26 23:04:29
-->
<template>
  <div class="layout-hamburger" @click="handleCollapse">
    <el-icon v-if="isCollapse" class="icon"><expand /></el-icon>
    <el-icon v-else class="icon"><fold /></el-icon>
  </div>
</template>

<script setup name="layout-hamburger">
import { computed } from 'vue';
import { useSettingStore } from '@/store/modules/setting';

const SettingStore = useSettingStore();
const isCollapse = computed(() => !SettingStore.isCollapse);

const handleCollapse = () => {
  SettingStore.setCollapse(isCollapse.value);
};
</script>
<style lang="scss" scoped>
.layout-hamburger {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 100%;
  &:hover {
    background: rgb(0 0 0 / 2.5%);
  }
  .icon {
    font-size: 24px;
    cursor: pointer;
  }
}
</style>