66 lines
1.3 KiB
Vue
66 lines
1.3 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, LayoutMode } from "@/enums/settings";
|
|
|
|
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>
|