| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import Logo from './Logo.vue' |
|---|
| | | import SidebarItem from './SidebarItem.vue' |
|---|
| | | import variables from '@/assets/styles/variables.module.scss' |
|---|
| | | import useAppStore from '@/store/modules/app' |
|---|
| | | import useSettingsStore from '@/store/modules/settings' |
|---|
| | | import usePermissionStore from '@/store/modules/permission' |
|---|
| | | import { RouteOption } from "vue-router"; |
|---|
| | | import Logo from './Logo.vue'; |
|---|
| | | import SidebarItem from './SidebarItem.vue'; |
|---|
| | | import variables from '@/assets/styles/variables.module.scss'; |
|---|
| | | import useAppStore from '@/store/modules/app'; |
|---|
| | | import useSettingsStore from '@/store/modules/settings'; |
|---|
| | | import usePermissionStore from '@/store/modules/permission'; |
|---|
| | | import { RouteRecordRaw } from 'vue-router'; |
|---|
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|---|
| | | |
|---|
| | | const route = useRoute(); |
|---|
| | | const appStore = useAppStore() |
|---|
| | | const settingsStore = useSettingsStore() |
|---|
| | | const permissionStore = usePermissionStore() |
|---|
| | | |
|---|
| | | const sidebarRouters = computed<RouteOption[]>(() => permissionStore.sidebarRouters); |
|---|
| | | const appStore = useAppStore(); |
|---|
| | | const settingsStore = useSettingsStore(); |
|---|
| | | const permissionStore = usePermissionStore(); |
|---|
| | | const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.sidebarRouters); |
|---|
| | | const showLogo = computed(() => settingsStore.sidebarLogo); |
|---|
| | | const sideTheme = computed(() => settingsStore.sideTheme); |
|---|
| | | const theme = computed(() => settingsStore.theme); |
|---|
| | | const isCollapse = computed(() => !appStore.sidebar.opened); |
|---|
| | | |
|---|
| | | 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 { meta, path } = route; |
|---|
| | | // if set path, the sidebar will highlight the path you set |
|---|
| | | if (meta.activeMenu) { |
|---|
| | | return meta.activeMenu; |
|---|
| | | } |
|---|
| | | return path; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const bgColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground); |
|---|
| | | const textColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor); |
|---|
| | | const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground)); |
|---|
| | | const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor)); |
|---|
| | | </script> |
|---|
