nuxt · antfu · Sep 18, 2023 · Sep 16, 2023 · Sep 16, 2023 · Sep 17, 2023
diff --git a/packages/devtools-kit/src/_types/options.ts b/packages/devtools-kit/src/_types/options.ts
@@ -153,6 +153,8 @@ export interface NuxtDevToolsOptions {
     hiddenTabCategories: string[]
     pinnedTabs: string[]
     minimizePanelInactive: number
+    sidebarExpanded: boolean
+    sidebarScrollable: boolean
   }
   serverRoutes: {
     selectedRoute: ServerRouteInfo | null

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
@@ -51,7 +51,7 @@ addEventListener('keydown', (e) => {
   }
 })
 
-const { scale } = useDevToolsUIOptions()
+const { scale, sidebarExpanded } = useDevToolsUIOptions()
 const dataSchema = useSchemaInput()
 
 onMounted(() => {
@@ -89,7 +89,8 @@ registerCommands(() =>
       Connecting....
     </NLoading>
     <div
-      v-else :grid="isUtilityView ? 'flex' : '~ cols-[50px_1fr]'"
+      v-else
+      :class="isUtilityView ? 'flex' : sidebarExpanded ? 'grid grid-cols-[250px_1fr]' : 'grid grid-cols-[50px_1fr]'"
       h-full h-screen of-hidden font-sans bg-base
     >
       <SideNav v-show="!isUtilityView" of-x-hidden of-y-auto />

diff --git a/packages/devtools/client/components/DockingPanel.vue b/packages/devtools/client/components/DockingPanel.vue
@@ -2,6 +2,8 @@
 const client = useClient()
 const nuxt = useNuxtApp()
 
+const { sidebarExpanded } = useDevToolsUIOptions()
+
 function refreshData() {
   nuxt.hooks.callHookParallel('app:data:refresh', Object.keys(nuxt.payload.data))
   triggerRef(client)
@@ -24,6 +26,10 @@ function toggleSplitScreen() {
           <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
         </NButton>
       </NDarkToggle>
+      <NButton n="sm primary" @click="sidebarExpanded = !sidebarExpanded">
+        <NIcon :icon="sidebarExpanded ? 'i-carbon-side-panel-close' : 'i-carbon-side-panel-open'" />
+        {{ sidebarExpanded ? 'Minimize Sidebar' : 'Expand Sidebar' }}
+      </NButton>
       <NButton n="sm primary" to="/settings">
         <div i-carbon-settings-adjust /> Settings
       </NButton>

diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
@@ -3,6 +3,7 @@ import TabsGrid from './TabsGrid.vue'
 
 const client = useClient()
 const allTabs = useEnabledTabs()
+const { sidebarExpanded, sidebarScrollable } = useDevToolsUIOptions()
 
 const showDocking = ref(false)
 const showMoreTabs = ref(false)
@@ -28,9 +29,15 @@ const containerCapacity = computed(() => {
 const inlineTabs = computed(() => allTabs.value.slice(0, containerCapacity.value))
 const overflowTabs = computed(() => allTabs.value.slice(containerCapacity.value))
 
+const categorizedTabs = getCategorizedTabs(allTabs)
 const categorizedInlineTabs = getCategorizedTabs(inlineTabs)
 const categorizedOverflowTabs = getCategorizedTabs(overflowTabs)
 
+const displayedTabs = computed(() => (sidebarScrollable.value || sidebarExpanded.value)
+  ? categorizedTabs.value
+  : categorizedInlineTabs.value,
+)
+
 onClickOutside(
   panel,
   (e) => {
@@ -46,8 +53,14 @@ onClickOutside(
 </script>
 
 <template>
-  <div id="nuxt-devtools-side-nav" border="r base" flex="~ col" z-100 h-full items-center of-hidden bg-base>
-    <div flex="~ none col items-center">
+  <div
+    id="nuxt-devtools-side-nav"
+    border="r base" flex="~ col"
+    z-100 h-full items-start of-hidden bg-base
+  >
+    <div
+      sticky top-0 z-1 w-full p1 bg-base border="b base"
+    >
       <VDropdown
         placement="left-start"
         :distance="12"
@@ -58,41 +71,56 @@ onClickOutside(
       >
         <button
           ref="buttonDocking"
-          flex="~"
+          flex="~ items-center justify-center gap-2"
           hover="bg-active"
-          relative my1 h-10 w-10 select-none items-center justify-center rounded-xl p1
-          text-secondary
+          relative h-10 select-none p2 text-secondary
           exact-active-class="!text-primary bg-active"
-          :class="client ? '' : 'saturate-0'"
+          :class="[
+            client ? '' : 'saturate-0',
+            sidebarExpanded ? 'w-full rounded pl2.5' : 'w-10 rounded-xl',
+          ]"
           :title="client ? 'Nuxt DevTools' : 'DevTools Client not connected, try open it in iframe mode'"
           @click="toggleDocking"
         >
           <div i-logos-nuxt-icon h-6 w-6 />
+          <template v-if="sidebarExpanded">
+            <span text="lg white" font-600>
+              DevTools
+            </span>
+            <div flex-auto />
+            <div i-carbon-overflow-menu-vertical />
+          </template>
         </button>
         <template #popper>
           <DockingPanel ref="panel" />
         </template>
       </VDropdown>
-      <div h-1px w-8 border="b base" />
     </div>
 
-    <div flex="~ auto col gap-0.5 items-center" of-hidden py1>
-      <template v-for="[name, tabs], idx of categorizedInlineTabs" :key="name">
+    <div
+      flex="~ auto col gap-0.5 items-center" w-full p1 class="no-scrollbar"
+      :class="sidebarExpanded ? '' : 'of-x-hidden of-y-auto'"
+    >
+      <template v-for="[name, tabs], idx of displayedTabs" :key="name">
         <template v-if="tabs.length">
-          <div v-if="idx" my1 h-1px w-8 border="b base" />
+          <div v-if="idx" my1 h-1px w-full border="b base" />
           <SideNavItem
             v-for="tab of tabs"
             :key="tab.name"
             :tab="tab"
+            :minimized="!sidebarExpanded"
           />
         </template>
       </template>
       <div flex-auto />
     </div>
 
-    <div flex="~ none col items-center gap-1" pb1>
+    <div
+      :flex="`~ items-center gap-1 ${sidebarExpanded ? '' : 'none col'}`"
+      border="t base" sticky bottom-0 w-full p1 bg-base
+    >
       <VDropdown
-        v-if="overflowTabs.length"
+        v-if="overflowTabs.length && !sidebarScrollable && !sidebarExpanded"
         placement="left-end"
         :distance="12"
         :triggers="[]"
@@ -123,18 +151,15 @@ onClickOutside(
           <TabsGrid :categories="categorizedOverflowTabs" max-w-80 target="main" />
         </template>
       </VDropdown>
-      <NuxtLink
-        to="/settings"
-        flex="~ items-center justify-center"
-        hover="bg-active"
-        relative block h-10 w-10 select-none rounded-xl p1 text-secondary
-        exact-active-class="!text-primary bg-active"
-      >
-        <TabIcon
-          text-xl
-          icon="i-carbon-settings-adjust" title="Settings" :show-title="false"
-        />
-      </NuxtLink>
+      <SideNavItem
+        :minimized="!sidebarExpanded"
+        :tab="{
+          icon: 'i-carbon:settings-adjust',
+          title: 'Settings',
+          name: 'settings',
+          path: '/settings',
+        }"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
@@ -5,18 +5,18 @@ import type { ModuleBuiltinTab, ModuleCustomTab } from '~/../src/types'
 const props = withDefaults(
   defineProps<{
     tab: ModuleCustomTab | ModuleBuiltinTab
+    minimized?: boolean
     target?: 'main' | 'side'
   }>(),
   {
+    minimized: true,
     target: 'main',
   },
 )
-
 const route = useRoute()
 
-const badge = computed(() => 'badge' in props.tab && props.tab.badge?.())
-
 const tabPath = computed(() => 'path' in props.tab ? props.tab.path! : `/modules/custom-${props.tab.name}`)
+const badge = computed(() => 'badge' in props.tab && props.tab.badge?.())
 const isActive = computed(() => route.path.startsWith(tabPath.value))
 
 function onClick() {
@@ -28,23 +28,34 @@ function onClick() {
 </script>
 
 <template>
-  <VTooltip placement="right">
+  <VTooltip :disabled="!minimized" placement="right" :class="{ 'w-full': !minimized }">
     <component
       :is="target === 'main' ? NuxtLink : 'button'"
       :to="tabPath"
-      flex="~"
-      hover="bg-active" relative
-      h-10 w-10 select-none items-center justify-center rounded-xl p1 text-secondary
+      :flex="`~ items-center ${minimized ? 'justify-center' : 'justify-between'}`"
+      hover="bg-active"
+      relative block h-10
+      :w="minimized ? '10' : 'full'" select-none
+      :rounded="minimized ? 'xl' : ''"
+      :p="minimized ? '1' : 'x3'" text-secondary
       exact-active-class="!text-primary bg-active"
       @click="onClick"
     >
-      <TabIcon
-        text-xl
-        :icon="tab.icon" :title="tab.title" :show-title="false"
-      />
+      <div flex="~ items-center gap-3">
+        <TabIcon
+          text-xl
+          :icon="tab.icon"
+          title="Settings"
+          :show-title="false"
+        />
+        <span v-if="!minimized" overflow-hidden text-ellipsis ws-nowrap>
+          {{ tab.title }}
+        </span>
+      </div>
       <div
-        v-if="badge" absolute bottom-0 right-0 h-4 w-4 rounded-full text-9px text-white flex="~ items-center justify-center"
-        :class="isActive ? 'bg-primary' : 'bg-gray'"
+        v-if="badge"
+        h-4 w-4 rounded-full text-9px text-white flex="~ items-center justify-center"
+        :class="[isActive ? 'bg-primary' : 'bg-gray', { 'absolute bottom-0 right-0': minimized }]"
       >
         <span translate-y-0.5px>{{ toValue(badge) }}</span>
       </div>

diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
@@ -12,6 +12,8 @@ const {
   pinnedTabs,
   hiddenTabCategories,
   minimizePanelInactive,
+  sidebarExpanded,
+  sidebarScrollable,
 } = useDevToolsUIOptions()
 
 const client = useClient()
@@ -156,6 +158,16 @@ watchEffect(() => {
               </NButton>
             </NDarkToggle>
           </div>
+          <NCheckbox v-model="sidebarExpanded" n-primary>
+            <span>
+              Expand Sidebar
+            </span>
+          </NCheckbox>
+          <NCheckbox v-model="sidebarScrollable" :disabled="sidebarExpanded" n-primary>
+            <span>
+              Scrollable Sidebar
+            </span>
+          </NCheckbox>
         </div>
         <div py3 flex="~ col gap-1" border="b base">
           <h3 mb1 text-lg>

diff --git a/packages/devtools/src/constant.ts b/packages/devtools/src/constant.ts
@@ -36,6 +36,8 @@ export const defaultTabOptions: NuxtDevToolsOptions = {
     hiddenTabs: [],
     pinnedTabs: [],
     hiddenTabCategories: [],
+    sidebarExpanded: false,
+    sidebarScrollable: false,
   },
   serverRoutes: {
     selectedRoute: null,