37 lines
1.3 KiB
Vue
37 lines
1.3 KiB
Vue
<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" />
|
|
</DarkModeContainer>
|
|
</template>
|
|
|
|
<style scoped></style>
|