<template>
|
<div :class="{ 'has-logo': showLogo }">
|
<logo v-if="showLogo" :collapse="false" />
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<el-menu class="left-menu" :default-active="activeMenu" :collapse="false"
|
:background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="false"
|
:active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
|
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" :is-top-route="true" />
|
</el-menu>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script setup name="Sidebar">
|
import { ref, reactive, watch, computed } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import Logo from './Logo';
|
import SidebarItem from './SidebarItem';
|
// import variables from '@/styles/variables.modules.scss';
|
import useAppStore from '@/store/app';
|
import usePromissionStore from '@/store/permission';
|
import useSettingsStore from '@/store/settings';
|
import { useRoute, useRouter } from 'vue-router';
|
const route = useRoute();
|
const router = useRouter();
|
|
const settingsStore = useSettingsStore();
|
const appStore = useAppStore();
|
const permissionStore = usePromissionStore();
|
const { sidebar } = storeToRefs(appStore);
|
const { permission_routes: routes } = storeToRefs(permissionStore);
|
const { secondMenuPopup, sidebarLogo: showLogo } = storeToRefs(settingsStore);
|
const { toggleSidebar } = appStore;
|
|
const veriables = reactive()({
|
menuBg: '#304156',
|
menuText: '#fff',
|
menuActiveText: '#409EFF'
|
});
|
|
watch(
|
() => activeMenu.value,
|
() => {
|
if (isCollapse.value) {
|
toggleSidebar();
|
}
|
}
|
);
|
|
const activeMenu = computed(() => {
|
const { meta, path } = route;
|
// if set path, the sidebar will highlight the path you set
|
if (meta.activeMenu) {
|
return meta.activeMenu;
|
}
|
return path;
|
});
|
|
const isCollapse = computed(() => {
|
if (secondMenuPopup.value) {
|
return true;
|
}
|
return !sidebar.value.opened;
|
});
|
</script>
|
