mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-17 09:16:37 +08:00
34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
|
|
import GlobalLogo from '../global-logo/index.vue';
|
|
|
|
defineOptions({
|
|
name: 'GlobalSider'
|
|
});
|
|
|
|
const appStore = useAppStore();
|
|
const themeStore = useThemeStore();
|
|
|
|
const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
|
|
const isHorizontalMix = computed(() => themeStore.layout.mode === 'horizontal-mix');
|
|
const darkMenu = computed(() => !themeStore.darkMode && !isHorizontalMix.value && themeStore.sider.inverted);
|
|
const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
|
|
const menuWrapperClass = computed(() => (showLogo.value ? 'flex-1-hidden' : 'h-full'));
|
|
</script>
|
|
|
|
<template>
|
|
<DarkModeContainer class="size-full flex-col-stretch shadow-sider" :inverted="darkMenu">
|
|
<GlobalLogo
|
|
v-if="showLogo"
|
|
:show-title="!appStore.siderCollapse"
|
|
:style="{ height: themeStore.header.height + 'px' }"
|
|
/>
|
|
<div :id="GLOBAL_SIDER_MENU_ID" :class="menuWrapperClass"></div>
|
|
</DarkModeContainer>
|
|
</template>
|
|
|
|
<style scoped></style>
|