feat(theme): add sidebarScrollbar options, close #425 (#460)

Author: pengzhanbo

docs/notes/theme/config/主题配置.md

@@ -657,6 +657,14 @@ interface SidebarItem {
 }
 ```
 
+### sidebarScrollbar
+
+- 类型： `boolean`
+- 默认值： `true`
+- 详情： 是否显示侧边栏滚动条
+
+  设置为 `false` 时，仅隐藏滚动条，但不改变滚动行为。
+
 ### aside
 
 - 类型： `boolean | 'left'`

theme/src/client/components/VPSidebar.vue

@@ -4,13 +4,14 @@ import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { useScrollLock } from '@vueuse/core'
 import { onMounted, ref, watch } from 'vue'
 import { useRoutePath } from 'vuepress/client'
-import { useSidebar } from '../composables/index.js'
+import { useData, useSidebar } from '../composables/index.js'
 import { inBrowser } from '../utils/index.js'
 
 const props = defineProps<{
   open: boolean
 }>()
 
+const { theme } = useData()
 const { sidebarGroups, hasSidebar, sidebarKey } = useSidebar()
 const routePath = useRoutePath()
 
@@ -52,7 +53,7 @@ onMounted(() => {
       v-if="hasSidebar"
       ref="navEl"
       class="vp-sidebar"
-      :class="{ open }"
+      :class="{ open, 'hide-scrollbar': !(theme.sidebarScrollbar ?? true) }"
       vp-sidebar
       @click.stop
     >
@@ -114,6 +115,15 @@ onMounted(() => {
   transform: translateX(0);
 }
 
+.vp-sidebar.hide-scrollbar {
+  scrollbar-width: none;
+}
+
+.vp-sidebar.hide-scrollbar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 [data-theme="dark"] .vp-sidebar {
   box-shadow: var(--vp-shadow-1);
 }

theme/src/shared/options/locale.ts

@@ -77,6 +77,12 @@ export interface PlumeThemeLocaleData extends LocaleData {
    */
   sidebar?: SidebarMulti
 
+  /**
+   * 是否显示侧边栏滚动条
+   * @default true
+   */
+  sidebarScrollbar?: boolean
+
   /**
    * 要显示的标题级别。
    *