fix: sidebar 'auto' not working (#178) (#224)

BREAKING CHANGE: If sidebat is `undefined`, it will be treated as `auto` where
previsouly it's treated as `false`. It was always treated as `auto`, but due to
this bug, the sidebar was hidden, therefore it looked like it was treated
as `false`.

Author: kiaking

__tests__/client/theme-default/support/sideBar.spec.ts

@@ -1,9 +1,19 @@
 import {
+  isSideBarEmpty,
   getSideBarConfig,
   getFlatSideBarLinks
 } from 'client/theme-default/support/sideBar'
 
 describe('client/theme-default/support/sideBar', () => {
+  it('checks if the given sidebar is empty', () => {
+    expect(isSideBarEmpty(undefined)).toBe(true)
+    expect(isSideBarEmpty(false)).toBe(true)
+    expect(isSideBarEmpty([])).toBe(true)
+
+    expect(isSideBarEmpty('auto')).toBe(false)
+    expect(isSideBarEmpty([{ text: 'a', link: '/a' }])).toBe(false)
+  })
+
   it('gets the correct sidebar items', () => {
     expect(getSideBarConfig(false, '')).toEqual(false)
     expect(getSideBarConfig('auto', '')).toEqual('auto')

src/client/theme-default/Layout.vue

@@ -74,6 +74,7 @@ import {
   usePageData,
   useSiteDataByRoute
 } from 'vitepress'
+import { isSideBarEmpty, getSideBarConfig } from './support/sideBar'
 import type { DefaultTheme } from './config'
 
 // components
@@ -127,14 +128,14 @@ const openSideBar = ref(false)
 
 const showSidebar = computed(() => {
   const { frontmatter } = route.data
+
+  if (frontmatter.home || frontmatter.sidebar === false) {
+    return false
+  }
+
   const { themeConfig } = siteRouteData.value
-  return (
-    !frontmatter.home &&
-    frontmatter.sidebar !== false &&
-    ((typeof themeConfig.sidebar === 'object' &&
-      Object.keys(themeConfig.sidebar).length != 0) ||
-      (Array.isArray(themeConfig.sidebar) && themeConfig.sidebar.length != 0))
-  )
+
+  return !isSideBarEmpty(getSideBarConfig(themeConfig.sidebar, route.path))
 })
 
 const toggleSidebar = (to?: boolean) => {

src/client/theme-default/support/sideBar.ts

@@ -13,6 +13,10 @@ export function isSideBarGroup(
   return (item as DefaultTheme.SideBarGroup).children !== undefined
 }
 
+export function isSideBarEmpty(sidebar?: DefaultTheme.SideBarConfig): boolean {
+  return isArray(sidebar) ? sidebar.length === 0 : !sidebar
+}
+
 /**
  * Get the `SideBarConfig` from sidebar option. This method will ensure to get
  * correct sidebar config from `MultiSideBarConfig` with various path