Skip to content
This repository has been archived by the owner on Jan 6, 2024. It is now read-only.

Commit

Permalink
feat: collapsible sidebar (#236)
Browse files Browse the repository at this point in the history
  • Loading branch information
elonehoo authored Sep 23, 2023
1 parent 6e3e58f commit 13b054e
Showing 7 changed files with 92 additions and 32 deletions.
7 changes: 5 additions & 2 deletions packages/client/App.vue
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 7 additions & 1 deletion packages/client/components/DockingPanel.vue
Original file line number Diff line number Diff line change
@@ -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"
46 changes: 36 additions & 10 deletions packages/client/components/SideNav.vue
Original file line number Diff line number Diff line change
@@ -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>
28 changes: 20 additions & 8 deletions packages/client/components/SideNavItem.vue
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions packages/client/composables/settings.ts
Original file line number Diff line number Diff line change
@@ -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)
12 changes: 11 additions & 1 deletion packages/client/pages/settings.vue
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 11 additions & 10 deletions packages/node/README.md
Original file line number Diff line number Diff line change
@@ -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
}
```

0 comments on commit 13b054e

Please sign in to comment.