<template>
	<el-icon class="collapse-icon hover-effect" @click="changeCollapse">
		<component :is="setting.isCollapse ? 'expand' : 'fold'"></component>
	</el-icon>
</template>

<script setup lang="ts">
// import { useGlobalStore } from '@/stores/modules/global'
import useStore from '@/store'
const { setting, app } = useStore()
// const globalStore = useGlobalStore()		setting.changeSetting('themeColor', val)
const changeCollapse = () => setting.changeSetting('isCollapse', !setting.isCollapse)
</script>

<style scoped lang="scss">
.collapse-icon {
	//margin-right: 20px;
	height: 100%;
	width: unset;
	padding: 0 15px;
	font-size: 16px;
	color: var(--el-header-text-color);
	//cursor: pointer;
	&.hover-effect {
		cursor: pointer;
		transition: background 0.3s;
		&::before {
			z-index: auto;
			content: '';
			background-color: #0000;
			opacity: 0.08;
			position: absolute;
			//left: 8px;
			//right: 8px;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			pointer-events: none;
			border-radius: 3px;
			transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}
		&:hover {
			//background: rgba(0, 0, 0, 0.025);
			//background: var(--el-fill-color);
			&::before {
				background-color: var(--el-color-primary);
			}
		}
	}
}
</style>
