67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<template>
|
|
<div class="hamburger-wrapper" @click="toggleClick">
|
|
<div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }, hamburgerClass]" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSettingsStore } from '@/store'
|
|
import { ThemeMode, SidebarColor } from '@/enums/settings/theme-enum'
|
|
import { LayoutMode } from '@/enums/settings/layout-enum'
|
|
|
|
defineProps({
|
|
isActive: { type: Boolean, required: true }
|
|
})
|
|
|
|
const emit = defineEmits(['toggleClick'])
|
|
|
|
const settingsStore = useSettingsStore()
|
|
const layout = computed(() => settingsStore.layout)
|
|
|
|
const hamburgerClass = computed(() => {
|
|
// 如果暗黑主题
|
|
if (settingsStore.theme === ThemeMode.DARK) {
|
|
return 'hamburger--white'
|
|
}
|
|
|
|
// 如果是混合布局 && 侧边栏配色方案是经典蓝
|
|
if (
|
|
layout.value === LayoutMode.MIX &&
|
|
settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
|
|
) {
|
|
return 'hamburger--white'
|
|
}
|
|
|
|
// 默认返回空字符串
|
|
return ''
|
|
})
|
|
|
|
function toggleClick() {
|
|
emit('toggleClick')
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.hamburger-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 15px;
|
|
cursor: pointer;
|
|
|
|
.hamburger {
|
|
vertical-align: middle;
|
|
transform: scaleX(-1);
|
|
transition: transform 0.3s ease;
|
|
|
|
&--white {
|
|
color: #fff;
|
|
}
|
|
|
|
&.is-active {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
}
|
|
</style>
|