<template>
|
<div :class="['hh', { 'has-logo': showLogo }]" style="font-size: 14px">
|
<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 { usePermissionStore } 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 = usePermissionStore();
|
const { sidebar } = storeToRefs(appStore);
|
const { routes: permission_routes } = storeToRefs(permissionStore);
|
const { secondMenuPopup, sidebarLogo: showLogo } = storeToRefs(settingsStore);
|
const { toggleSidebar } = appStore;
|
|
const variables = reactive({
|
menuBg: '#304156',
|
menuText: '#fff',
|
menuActiveText: '#409EFF'
|
});
|
|
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;
|
});
|
|
watch(
|
() => activeMenu.value,
|
() => {
|
if (isCollapse.value) {
|
toggleSidebar();
|
}
|
}
|
);
|
|
|
const isCollapse = computed(() => {
|
if (secondMenuPopup.value) {
|
return true;
|
}
|
return !sidebar.value.opened;
|
});
|
</script>
|
