feat(ui): add sideNav component and composable

Author: webfansplz

packages/rolldown/src/app/pages/session/[session].vue

@@ -2,9 +2,10 @@
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
+import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
 import { onKeyDown } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
-import { useSideNav } from '~/state/nav'
 import { getFileTypeFromName } from '~/utils/icon'
 
 const params = useRoute().params as {

packages/rolldown/src/app/pages/session/[session]/index.vue

@@ -3,8 +3,8 @@ import type { SessionContext } from '~~/shared/types'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { sideNavItems } from '@vitejs/devtools-ui/composables/nav'
 import { computed } from 'vue'
-import { sideNavItems } from '~~/app/state/nav'
 
 const props = defineProps<{
   session: SessionContext

packages/ui/package.json

@@ -45,6 +45,7 @@
   "module": "./src/index.ts",
   "peerDependencies": {
     "@vueuse/core": "*",
+    "nuxt": "*",
     "unocss": "*",
     "vue": "*",
     "vue-virtual-scroller": ">=2.0.0-beta.0"

…own/src/app/components/panel/SideNav.vue …kages/ui/src/components/PanelSideNav.vuepackages/rolldown/src/app/components/panel/SideNav.vue renamed to packages/ui/src/components/PanelSideNav.vue packages/rolldown/src/app/components/panel/SideNav.vue renamed to packages/ui/src/components/PanelSideNav.vue

@@ -1,18 +1,31 @@
 <script setup lang="ts">
-import type { SideNavItem } from '~/state/nav'
+import type { SideNavItem } from '../composables/nav'
 import { NuxtLink } from '#components'
-import { toggleDark } from '@vitejs/devtools-ui/composables/dark'
 import { computed } from 'vue'
-import { sideNavItems } from '~/state/nav'
+import { toggleDark } from '../composables/dark'
+import { sideNavItems } from '../composables/nav'
 
-const items = computed<SideNavItem[]>(() => [
-  ...sideNavItems.value,
-  {
-    title: 'Toggle dark mode',
-    icon: 'i-ph-sun-duotone dark:i-ph-moon-duotone',
-    action: toggleDark,
-  },
-])
+const props = withDefaults(defineProps<{
+  items?: SideNavItem[]
+  showDarkModeToggle?: boolean
+}>(), {
+  showDarkModeToggle: true,
+})
+
+const items = computed<SideNavItem[]>(() => {
+  const navItems = props.items ?? sideNavItems.value
+  if (!props.showDarkModeToggle) {
+    return navItems
+  }
+  return [
+    ...navItems,
+    {
+      title: 'Toggle dark mode',
+      icon: 'i-ph-sun-duotone dark:i-ph-moon-duotone',
+      action: toggleDark,
+    },
+  ]
+})
 </script>
 
 <template>

packages/rolldown/src/app/state/nav.ts packages/ui/src/composables/nav.tspackages/rolldown/src/app/state/nav.ts renamed to packages/ui/src/composables/nav.ts

@@ -9,29 +9,28 @@ export interface SideNavItem {
   action?: () => void
 }
 
-let __id = 0
+let id = 0
 const sideNavItemsMap = reactive(new Map<number, SideNavItem[]>())
 
 export const sideNavItems = computed(() => Array.from(sideNavItemsMap.values()).flat())
 
 export function useSideNav(items: MaybeRefOrGetter<SideNavItem[]>) {
-  const r = toRef(items)
+  const itemsRef = toRef(items)
 
   let clear = () => {}
-  function add(items: SideNavItem[]) {
+  function add(nextItems: SideNavItem[]) {
     clear()
-    const id = __id++
-    sideNavItemsMap.set(id, items)
+    const currentId = id++
+    sideNavItemsMap.set(currentId, nextItems)
     clear = () => {
-      sideNavItemsMap.delete(id)
+      sideNavItemsMap.delete(currentId)
     }
-    return id
   }
 
   watch(
-    r,
-    (items) => {
-      add(items)
+    itemsRef,
+    (nextItems) => {
+      add(nextItems)
     },
     { immediate: true },
   )