chore: fix nav bar

Author: antfu

.gitignore

@@ -19,3 +19,4 @@ packages/kit/skills
 *.tsbuildinfo
 docs/.vitepress/cache
 .turbo
+.context

packages/self-inspect/package.json

@@ -19,7 +19,6 @@
   "sideEffects": false,
   "exports": {
     ".": "./dist/index.mjs",
-    "./dirs": "./dist/dirs.mjs",
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.mts",

packages/self-inspect/src/app/app.vue

@@ -1,40 +1,22 @@
 <script setup lang="ts">
 import { useHead } from '#app/composables/head'
-import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
-import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
+import { toggleDark } from '@vitejs/devtools-ui/composables/dark'
 import { useRefresh } from './composables/refresh'
 import { connect, connectionState } from './composables/rpc'
 import './styles/global.css'
-import '@vitejs/devtools-ui/composables/dark'
 
 useHead({
   title: 'DevTools Self Inspect',
 })
 
 connect()
 
-useSideNav([
-  {
-    title: 'RPC Functions',
-    to: '/rpc',
-    icon: 'i-ph-plugs-connected-duotone',
-  },
-  {
-    title: 'Docks',
-    to: '/docks',
-    icon: 'i-ph-layout-duotone',
-  },
-  {
-    title: 'Client Scripts',
-    to: '/scripts',
-    icon: 'i-ph-code-duotone',
-  },
-  {
-    title: 'DevTools Plugins',
-    to: '/plugins',
-    icon: 'i-ph-puzzle-piece-duotone',
-  },
-])
+const navItems = [
+  { title: 'RPC Functions', to: '/rpc', icon: 'i-ph-plugs-connected-duotone' },
+  { title: 'Docks', to: '/docks', icon: 'i-ph-layout-duotone' },
+  { title: 'Client Scripts', to: '/scripts', icon: 'i-ph-code-duotone' },
+  { title: 'Plugins', to: '/plugins', icon: 'i-ph-puzzle-piece-duotone' },
+]
 
 const { refresh, loading } = useRefresh()
 </script>
@@ -47,25 +29,45 @@ const { refresh, loading } = useRefresh()
     v-else-if="!connectionState.connected"
     text="Connecting..."
   />
-  <div v-else h-vh w-screen max-w-screen max-h-screen of-hidden>
-    <PanelSideNav />
-    <div pl-12 h-full flex="~ col" of-hidden>
-      <div flex="~ items-center justify-end" border="b base" px3 h8 shrink-0>
-        <button
-          p1.5 rounded
-          hover:bg-active
-          op50 hover:op100
-          transition-colors
-          title="Refresh"
-          :disabled="loading"
-          @click="refresh"
-        >
-          <span i-ph-arrow-clockwise text-sm :class="loading ? 'animate-spin' : ''" />
-        </button>
-      </div>
-      <div flex-1 of-auto>
-        <NuxtPage />
-      </div>
+  <div v-else h-vh flex="~ col" of-hidden>
+    <div flex="~ items-center" border="b base" h9 shrink-0>
+      <NuxtLink
+        v-for="item in navItems" :key="item.to"
+        :to="item.to"
+        flex="~ items-center gap-1.5"
+        px3 h-full text-sm
+        op50 hover:op100 transition-colors
+        border="b-2 transparent"
+        active-class="op100! border-b-primary!"
+      >
+        <span :class="item.icon" text-base />
+        <span>{{ item.title }}</span>
+      </NuxtLink>
+      <div flex-1 />
+      <button
+        mr2 p1.5 rounded
+        hover:bg-active
+        op50 hover:op100
+        transition-colors
+        title="Refresh"
+        :disabled="loading"
+        @click="refresh"
+      >
+        <span i-ph-arrow-clockwise text-sm :class="loading ? 'animate-spin' : ''" />
+      </button>
+      <button
+        mr2 p1.5 rounded
+        hover:bg-active
+        op50 hover:op100
+        transition-colors
+        title="Toggle dark mode"
+        @click="toggleDark"
+      >
+        <span class="i-ph-sun-duotone dark:i-ph-moon-duotone" text-sm />
+      </button>
+    </div>
+    <div flex-1 of-auto>
+      <NuxtPage />
     </div>
   </div>
 </template>

packages/self-inspect/src/app/styles/global.css

@@ -17,7 +17,7 @@ html {
 }
 html.dark {
   color-scheme: dark;
-  background-color: black;
+  background-color: #121212;
 }
 body {
   --uno: color-base;

packages/self-inspect/tsdown.config.ts

@@ -3,7 +3,6 @@ import { defineConfig } from 'tsdown'
 export default defineConfig({
   entry: {
     index: 'src/index.ts',
-    dirs: 'src/dirs.ts',
   },
   tsconfig: '../../tsconfig.base.json',
   target: 'esnext',