feat(applet): show name on pinia panel nav

vuejs · Mar 20, 2024 · ac59853 · ac59853
1 parent c386c66
commit ac59853
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/packages/applet/src/composables/virtual-router.ts b/packages/applet/src/composables/virtual-router.ts
@@ -2,9 +2,9 @@ import type { Component, InjectionKey, Ref } from 'vue'
 import { computed, defineComponent, h, inject, provide, ref } from 'vue'
 
 const VirtualRouteKey: InjectionKey<Ref<{ path: string }>> = Symbol('VirtualRouteKey')
-const VirtualRoutesKey: InjectionKey<{ path: string, component: Component, icon?: string }[]> = Symbol('VirtualRoutesKey')
+const VirtualRoutesKey: InjectionKey<{ path: string, component: Component, icon?: string, name?: string }[]> = Symbol('VirtualRoutesKey')
 
-export function registerVirtualRouter(routes: { path: string, component: Component, icon?: string }[]) {
+export function registerVirtualRouter(routes: { path: string, component: Component, icon?: string, name?: string }[]) {
   const route = ref<{ path: string, icon?: string }>({
     path: '/',
   })
@@ -38,8 +38,11 @@ export function useVirtualRouter() {
 }
 
 export function useVirtualRoute() {
-  const route = inject(VirtualRoutesKey)!
+  const routes = inject(VirtualRoutesKey)!
+  const route = inject(VirtualRouteKey)!
+
   return {
-    routes: route,
+    routes,
+    currentRoute: route,
   }
 }
diff --git a/packages/applet/src/pinia/components/Navbar.vue b/packages/applet/src/pinia/components/Navbar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVirtualRoute, useVirtualRouter } from '~/composables/virtual-router'
 
-const { routes } = useVirtualRoute()
+const { routes, currentRoute } = useVirtualRoute()
 const router = useVirtualRouter()
 </script>
 
@@ -10,10 +10,13 @@ const router = useVirtualRouter()
     <li
       v-for="(item, index) in routes"
       :key="index"
-      cursor-pointer op70 hover:op100
+      cursor-pointer hover:op100
+      :style="{
+        opacity: currentRoute.path === item.path ? 1 : 0.7,
+      }"
       @click="router.push(item.path)"
     >
-      <i :class="item.icon" />
+      {{ item.name }}
     </li>
   </ul>
 </template>
diff --git a/packages/applet/src/pinia/index.vue b/packages/applet/src/pinia/index.vue
@@ -12,16 +12,19 @@ createDevToolsConnectStateContext()
 const { VirtualRouterView } = registerVirtualRouter([
   {
     path: '/',
+    name: 'Home',
     component: Home,
     icon: 'i-logos-pinia',
   },
   {
     path: '/store',
+    name: 'Store',
     component: Store,
     icon: 'i-carbon-tree-view-alt',
   },
   {
     path: '/timeline',
+    name: 'Timeline',
     component: Timeline,
     icon: 'i-mdi:timeline-clock-outline',
   },