BlogMenu.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <script setup lang="ts">
  2. import { modules as blogModules, router } from '@/router';
  3. import { computed } from 'vue';
  4. const currentRouteName = computed(() => router.currentRoute.value.name);
  5. </script>
  6. <template>
  7. <div class="nav" >
  8. <div class="module-wrapper" v-for="m of blogModules" :key="m.routeName" @click="router.push(m.routeUrl)">
  9. <div :class="(currentRouteName == m.routeName) ? ['module-active-icon-wrapper'] : ['icon-wrapper']">
  10. <div v-html="m.iconTemplate" class="module-icon"/>
  11. </div>
  12. <div class="module-item">{{ m.title }}</div>
  13. </div>
  14. </div>
  15. </template>
  16. <style scoped>
  17. .module-icon {
  18. width: 16px;
  19. height: 16px;
  20. display: flex
  21. }
  22. .nav {
  23. display: flex;
  24. flex-direction: column;
  25. gap: 10px;
  26. transition: all .3s;
  27. }
  28. .module-wrapper {
  29. display: flex;
  30. align-items: center;
  31. cursor: pointer;
  32. border-radius: 12px;
  33. background: transparent;
  34. padding: 0 0 0 12px;
  35. transition: all .3s;
  36. }
  37. .module-wrapper:hover {
  38. background: #f0f0f0;
  39. }
  40. .module-item {
  41. display: flex;
  42. text-decoration: none;
  43. color: #333;
  44. padding: 10px 12px;
  45. transition: all .3s;
  46. }
  47. @media screen and (max-width: 800px) {
  48. .nav {
  49. flex-direction: row;
  50. gap: 5px;
  51. overflow-y: hidden;
  52. overflow-x: auto;
  53. white-space: nowrap;
  54. }
  55. .module-item {
  56. line-height: 50px;
  57. padding: 0 20px 0 12px;
  58. }
  59. }
  60. .icon-wrapper {
  61. height: 32px;
  62. width: 32px;
  63. display: flex;
  64. align-items: center;
  65. justify-content: center;
  66. border-radius: 12px;
  67. transition: .3s all;
  68. }
  69. .module-active-icon-wrapper {
  70. background: #F0F0F0;
  71. border-radius: 12px;
  72. width: 32px;
  73. height: 32px;
  74. display: flex;
  75. align-items: center;
  76. justify-content: center;
  77. transition: .3s all;
  78. }
  79. </style>