feat(applet): improve custom inspector page nav style (#477)

Author: reslear

packages/applet/src/components/basic/DevToolsHeader.vue

@@ -10,7 +10,7 @@ const router = useVirtualRouter()
 </script>
 
 <template>
-  <div border="b base" class="h10 h40px flex items-center justify-between px3">
+  <div border="b base" class="flex items-center justify-between px3">
     <div>
       <slot>
         <i class="i-ep:back cursor-pointer op70 text-base hover:op100" @click="router.push('/')" />

packages/applet/src/components/basic/Navbar.vue

@@ -10,10 +10,8 @@ const router = useVirtualRouter()
     <li
       v-for="(item, index) in routes"
       :key="index"
-      cursor-pointer hover:op100
-      :style="{
-        opacity: currentRoute.path === item.path ? 1 : 0.7,
-      }"
+      class="h-10 flex cursor-pointer items-center justify-center border-b-[2px] border-solid text-size-sm leading-none hover:op100"
+      :class="currentRoute.path === item.path ? 'op-100 font-medium text-primary-400 border-primary-400' : 'border-transparent op-70'"
       @click="router.push(item.path)"
     >
       {{ item.name }}