feat: collapsible sidebar (#236)

Author: elonehoo

packages/client/App.vue

@@ -6,7 +6,7 @@ import { initPinia } from './logic/pinia'
 
 const route = useRoute()
 const router = useRouter()
-const { scale } = useDevToolsSettings()
+const { scale, sidebarExpanded } = useDevToolsSettings()
 const { route: _route, isFirstVisit } = useFrameState()
 
 useColorMode()
@@ -63,7 +63,10 @@ router.replace(_route.value)
 <template>
   <main fixed inset-0 h-screen w-screen>
     <Notification />
-    <div grid="~ cols-[50px_1fr]" h-full h-screen of-hidden font-sans bg-base>
+    <div
+      :class="sidebarExpanded ? 'grid grid-cols-[250px_1fr]' : 'grid grid-cols-[50px_1fr]'"
+      h-full h-screen of-hidden font-sans bg-base
+    >
       <SideNav v-if="!route.path.startsWith('/__')" of-x-hidden of-y-auto />
       <RouterView />
     </div>

packages/client/components/DockingPanel.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { isInPopup } from '~/logic/state'
+
+const { sidebarExpanded } = useDevToolsSettings()
 </script>
 
 <template>
@@ -9,10 +11,14 @@ import { isInPopup } from '~/logic/state'
       <FullscreenButton v-if="!isInPopup" />
       <VDDarkToggle v-slot="{ toggle, isDark }">
         <VDButton n="sm primary" @click="toggle">
-          <div carbon-sun translate-y--1px dark:carbon-moon />
+          <div carbon-sun dark:carbon-moon translate-y--1px />
           {{ isDark.value ? "Dark" : "Light" }}
         </VDButton>
       </VDDarkToggle>
+      <VDButton n="sm primary" @click="sidebarExpanded = !sidebarExpanded">
+        <VDIcon :icon="sidebarExpanded ? 'i-carbon-side-panel-close' : 'i-carbon-side-panel-open'" />
+        {{ sidebarExpanded ? 'Minimize Sidebar' : 'Expand Sidebar' }}
+      </VDButton>
       <RouterLink
         replace
         class="n-button-base active:n-button-active focus-visible:n-focus-base n-transition n-primary n-sm hover:n-button-hover n-disabled:n-disabled"

packages/client/components/SideNav.vue

@@ -3,45 +3,68 @@ import { getSortedTabs } from '~/store'
 
 const groupedTabs = useGroupedTabs()
 
+const { sidebarExpanded } = useDevToolsSettings()
+
 const renderedGroupedTabs = computed(() => {
   return groupedTabs.value.filter(([, { tabs, show }]) => tabs.length && show)
 })
 </script>
 
 <template>
-  <div border="r base" flex="~ col gap-0.5" z-100 h-full items-center bg-base class="no-scrollbar">
-    <div flex="~ col" sticky top-0 z-1 mb1 items-center pt3 bg-base>
+  <div border="r base" flex="~ col gap-0.5" z-100 h-full w-full items-center bg-base class="no-scrollbar">
+    <div sticky top-0 z-1 w-full p1 bg-base border="b base">
       <VDropdown placement="left-start" :distance="20">
         <button
-          i-logos-vue h-6 w-6 text-lg
+          flex="~ items-center justify-center gap-2"
+          hover="bg-active"
+          relative h-10 select-none p2 text-secondary
+          :class="[
+            sidebarExpanded ? 'w-full rounded pl2.5' : '',
+          ]"
           title="Vue DevTools"
-        />
+        >
+          <div class="i-logos-vue h-6 w-6" />
+          <template v-if="sidebarExpanded">
+            <span text="lg white" font-600>
+              Vue DevTools
+            </span>
+            <div flex-auto />
+            <div i-carbon-overflow-menu-vertical />
+          </template>
+        </button>
         <template #popper>
           <DockingPanel />
         </template>
       </VDropdown>
 
-      <div mt-2 h-1px w-8 border="b base" />
+      <div mt-2 h-1px w-full border="b base" />
     </div>
 
-    <div flex="~ auto col gap-0.5 items-center" of-auto class="no-scrollbar" py1>
+    <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 renderedGroupedTabs" :key="name">
         <SideNavItem
           v-for="tab of getSortedTabs(tabs)"
           :key="tab.path"
           :tab="tab"
+          :minimized="!sidebarExpanded"
         />
-        <div v-if="idx !== renderedGroupedTabs.length - 1" my1 h-1px w-8 border="b base" />
+        <div v-if="idx !== renderedGroupedTabs.length - 1" my1 h-1px w-full border="b base" />
       </template>
       <div flex-auto />
     </div>
 
-    <div flex="~ none col items-center">
-      <div h-1px w-8 border="b base" />
+    <div flex="~ none col items-center" :class="{ 'w-full': sidebarExpanded }">
+      <div h-1px w-full border="b base" />
       <RouterLink
         replace
         to="/settings"
-        flex="~ items-center justify-center"
+        :flex="`~ items-center ${!sidebarExpanded ? 'justify-center' : 'justify-start'}`"
+        :w="!sidebarExpanded ? '10' : 'full'"
+        :rounded="!sidebarExpanded ? 'xl' : ''"
+        :p="!sidebarExpanded ? '1' : 'x3'"
         hover="bg-active"
         relative my1 block h-10 w-10 select-none rounded-xl p1 text-secondary
         exact-active-class="!text-primary bg-active"
@@ -50,6 +73,9 @@ const renderedGroupedTabs = computed(() => {
           text-xl
           icon="i-carbon-settings" title="Settings" :show-title="false"
         />
+        <span v-if="sidebarExpanded" ml-2 overflow-hidden text-ellipsis ws-nowrap>
+          Settings
+        </span>
       </RouterLink>
     </div>
   </div>

packages/client/components/SideNavItem.vue

@@ -3,9 +3,12 @@ import type { Tab } from '~/types'
 import { useDevToolsClient } from '~/logic/client'
 import { getMappedBuiltinTabs } from '~/store'
 
-defineProps<{
+withDefaults(defineProps<{
   tab: Tab
-}>()
+  minimized?: boolean
+}>(), {
+  minimized: true,
+})
 const client = useDevToolsClient()
 const router = useRouter()
 
@@ -17,21 +20,30 @@ function handleClick(tab: Tab) {
 </script>
 
 <template>
-  <VTooltip placement="right">
+  <VTooltip :disabled="!minimized" placement="right" :class="{ 'w-full': !minimized }">
     <Component
       :is="tab.path ? 'RouterLink' : 'button'"
       replace
       :to="`/${tab.path}`"
-      flex="~"
+      :flex="`~ items-center ${minimized ? 'justify-center' : 'justify-between'}`"
+      :w="minimized ? '10' : 'full'"
+      :rounded="minimized ? 'xl' : ''"
+      :p="minimized ? '1' : 'x3'"
       hover="bg-active"
       h-10 w-10 select-none items-center justify-center rounded-xl p1 text-secondary
       exact-active-class="!text-primary bg-active"
       @click="() => handleClick(tab)"
     >
-      <TabIcon
-        text-xl
-        :icon="tab.icon" :title="tab.title"
-      />
+      <div>
+        <TabIcon
+          text-xl
+          :icon="tab.icon"
+          :title="tab.title"
+        />
+        <span v-if="!minimized" ml-2 overflow-hidden text-ellipsis ws-nowrap>
+          {{ tab.title }}
+        </span>
+      </div>
     </Component>
     <template #popper>
       <div>

packages/client/composables/settings.ts

@@ -4,12 +4,14 @@ export interface DevToolsUISettings {
   scale: number
   hiddenTabs: string[]
   hiddenTabGroups: string[]
+  sidebarExpanded: boolean
 }
 
 const devToolsSettings = useLocalStorage<DevToolsUISettings>('__vue-devtools-settings__', {
   scale: 1,
   hiddenTabs: [],
   hiddenTabGroups: [],
+  sidebarExpanded: true,
 }, { mergeDefaults: true })
 
 const devToolsSettingsRefs = toRefs(devToolsSettings)

packages/client/pages/settings.vue

@@ -5,6 +5,7 @@ const {
   scale,
   hiddenTabs,
   hiddenTabGroups,
+  sidebarExpanded,
 } = useDevToolsSettings()
 
 const { closeOnOutsideClick, minimizePanelInactive } = useFrameState()
@@ -113,7 +114,7 @@ const showTabGroup = ref(false)
           <div>
             <VDDarkToggle v-slot="{ toggle, isDark }">
               <VDButton n="primary" @click="toggle">
-                <div carbon-sun translate-y--1px dark:carbon-moon /> {{ isDark.value ? 'Dark' : 'Light' }}
+                <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
               </VDButton>
             </VDDarkToggle>
           </div>
@@ -148,6 +149,15 @@ const showTabGroup = ref(false)
             @update:model-value="toggleClickOutside"
           />
         </div>
+        <div py3 flex="~ justify-between gap-1">
+          <h3 mb1 text-lg>
+            {{ sidebarExpanded ? 'Scrollable' : 'Expand' }} Sidebar
+          </h3>
+          <VDSwitch
+            flex="~ row-reverse" py1 n-primary :model-value="sidebarExpanded"
+            @update:model-value="sidebarExpanded = !sidebarExpanded"
+          />
+        </div>
       </div>
     </div>
   </div>

packages/node/README.md

@@ -12,6 +12,7 @@ English | <a href="./README.zh-CN.md">简体中文</a>
 <p align="center">
   <a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-vue-devtools" alt="NPM Version" /></a>
   <a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/dt/vite-plugin-vue-devtools" alt="NPM Downloads" /></a>
+  <a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/node/v/vite-plugin-vue-devtools" alt="Node Compatibility" /></a>
  <a href="https://github.com/webfansplz/vite-plugin-vue-devtools/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/webfansplz/vite-plugin-vue-devtools" alt="License" /></a>
 </p>
 
@@ -121,31 +122,31 @@ export default defineConfig({
 interface AnalyzeOptions {
   /**
    * @default true
-  */
+   */
   rerenderTrace: boolean
 }
 
 interface VitePluginVueDevToolsOptions {
   /**
-  * append an import to the module id ending with `appendTo` instead of adding a script into body
-  * useful for projects that do not use html file as an entry
-  *
-  * WARNING: only set this if you know exactly what it does.
-  */
+   * append an import to the module id ending with `appendTo` instead of adding a script into body
+   * useful for projects that do not use html file as an entry
+   *
+   * WARNING: only set this if you know exactly what it does.
+   */
   appendTo?: string | RegExp
   /**
    * Enable Vue DevTools to analyze the codebase by using Babel
    * @default
    * {
    *   rerenderTrace: true, // enable rerenderTrace feature
    * }
-  */
+   */
   analyze?: Partial<AnalyzeOptions>
 
   /**
-  * Customize openInEditor host (e.g. http://localhost:3000)
-  * @default false
-  */
+   * Customize openInEditor host (e.g. http://localhost:3000)
+   * @default false
+   */
   openInEditorHost?: string | false
 }
 ```