<script setup lang="ts">
|
import { computed } from 'vue';
|
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
|
import { useAppStore } from '@/store/modules/app';
|
import { useThemeStore } from '@/store/modules/theme';
|
import GlobalLogo from '../global-logo/index.vue';
|
|
defineOptions({
|
name: 'GlobalSider'
|
});
|
|
const appStore = useAppStore();
|
const themeStore = useThemeStore();
|
|
const isTopHybridSidebarFirst = computed(() => themeStore.layout.mode === 'top-hybrid-sidebar-first');
|
const isTopHybridHeaderFirst = computed(() => themeStore.layout.mode === 'top-hybrid-header-first');
|
const darkMenu = computed(
|
() =>
|
!themeStore.darkMode && !isTopHybridSidebarFirst.value && !isTopHybridHeaderFirst.value && themeStore.sider.inverted
|
);
|
const showLogo = computed(() => themeStore.layout.mode === 'vertical');
|
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>
|
