44 lines
1.4 KiB
Vue
44 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useRoute } from "vue-router";
|
|
import SidebarItem from "./SidebarItem.vue";
|
|
import Logo from "./Logo.vue";
|
|
|
|
import { useSettingsStore } from "@/store/modules/settings";
|
|
import { usePermissionStore } from "@/store/modules/permission";
|
|
import { useAppStore } from "@/store/modules/app";
|
|
import { storeToRefs } from "pinia";
|
|
import variables from "@/styles/variables.module.scss";
|
|
|
|
const settingsStore = useSettingsStore();
|
|
const permissionStore = usePermissionStore();
|
|
const appStore = useAppStore();
|
|
const currRoute = useRoute();
|
|
const { sidebarLogo } = storeToRefs(settingsStore);
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="{ 'has-logo': sidebarLogo }">
|
|
<logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
|
|
<el-scrollbar>
|
|
<el-menu
|
|
:default-active="currRoute.path"
|
|
:collapse="!appStore.sidebar.opened"
|
|
:background-color="variables.menuBg"
|
|
:text-color="variables.menuText"
|
|
:active-text-color="variables.menuActiveText"
|
|
:unique-opened="false"
|
|
:collapse-transition="false"
|
|
mode="vertical"
|
|
>
|
|
<sidebar-item
|
|
v-for="route in permissionStore.routes"
|
|
:key="route.path"
|
|
:item="route"
|
|
:base-path="route.path"
|
|
:is-collapse="!appStore.sidebar.opened"
|
|
/>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|