Files
vue3-element-admin/src/layout/components/Sidebar/index.vue
2024-07-06 10:19:13 +08:00

39 lines
1.1 KiB
Vue

<template>
<div :class="{ 'has-logo': sidebarLogo }">
<!-- layout mix-->
<div class="flex w-full" v-if="layout == LayoutEnum.MIX">
<SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
<SidebarMixTopMenu class="flex-1" />
<NavbarAction />
</div>
<!-- layout left || layout top -->
<template v-else>
<SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
<el-scrollbar>
<SidebarMenu :menu-list="permissionStore.routes" base-path="" />
</el-scrollbar>
<NavbarAction v-if="layout === LayoutEnum.TOP" />
</template>
</div>
</template>
<script setup lang="ts">
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
import { LayoutEnum } from "@/enums/LayoutEnum";
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const sidebarLogo = computed(() => settingsStore.sidebarLogo);
const layout = computed(() => settingsStore.layout);
</script>
<style lang="scss" scoped>
.has-logo {
.el-scrollbar {
height: calc(100vh - $navbar-height);
}
}
</style>