Newer
Older
urbanLifeline_YanAn / src / layout / components / Sidebar / index.vue
@zhangqy zhangqy on 3 Oct 2 KB first commit
  1. <template>
  2. <div
  3. :class="{ 'has-logo': showLogo }"
  4. :style="{
  5. backgroundColor:
  6. sideTheme === 'theme-dark'
  7. ? variables.menuBackground
  8. : variables.menuLightBackground,
  9. }"
  10. >
  11. <logo v-if="showLogo" :collapse="isCollapse" />
  12. <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
  13. <el-menu
  14. :default-active="activeMenu"
  15. :collapse="isCollapse"
  16. :background-color="
  17. sideTheme === 'theme-dark'
  18. ? variables.menuBackground
  19. : variables.menuLightBackground
  20. "
  21. :text-color="
  22. sideTheme === 'theme-dark'
  23. ? variables.menuColor
  24. : variables.menuLightColor
  25. "
  26. :unique-opened="true"
  27. :active-text-color="theme"
  28. :collapse-transition="false"
  29. mode="vertical"
  30. >
  31. <sidebar-item
  32. v-for="(route, index) in sidebarRouters"
  33. :key="route.path + index"
  34. :item="route"
  35. :base-path="route.path"
  36. />
  37. </el-menu>
  38. </el-scrollbar>
  39. </div>
  40. </template>
  41.  
  42. <script setup>
  43. import Logo from "./Logo";
  44. import SidebarItem from "./SidebarItem";
  45. import variables from "@/assets/styles/variables.module.scss";
  46. import useAppStore from "@/store/modules/app";
  47. import useSettingsStore from "@/store/modules/settings";
  48. import usePermissionStore from "@/store/modules/permission";
  49.  
  50. const route = useRoute();
  51. const appStore = useAppStore();
  52. const settingsStore = useSettingsStore();
  53. const permissionStore = usePermissionStore();
  54.  
  55. const sidebarRouters = computed(() => permissionStore.sidebarRouters);
  56. const showLogo = computed(() => settingsStore.sidebarLogo);
  57. const sideTheme = computed(() => settingsStore.sideTheme);
  58. const theme = computed(() => settingsStore.theme);
  59. const isCollapse = computed(() => !appStore.sidebar.opened);
  60.  
  61. const activeMenu = computed(() => {
  62. const { meta, path } = route;
  63. // if set path, the sidebar will highlight the path you set
  64. if (meta.activeMenu) {
  65. return meta.activeMenu;
  66. }
  67. return path;
  68. });
  69. </script>