From c706517c0cd297389853d2f5fe5811b20bfd8dce Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Thu, 26 May 2022 19:07:17 +0530
Subject: [PATCH] feat: add option to set collapsed by default

---
 .../theme-default/components/VPSidebar.vue      |  7 ++++++-
 .../theme-default/components/VPSidebarGroup.vue | 17 +++++++++++------
 src/client/theme-default/styles/base.css        |  4 ++++
 types/default-theme.d.ts                        |  5 +++++
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index df3751b3..c7511357 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -34,7 +34,12 @@ watchPostEffect(async () => {
       </span>
 
       <div v-for="group in sidebar" :key="group.text" class="group">
-        <VPSidebarGroup :text="group.text" :items="group.items" :collapsible="group.collapsible" />
+        <VPSidebarGroup
+          :text="group.text"
+          :items="group.items"
+          :collapsible="group.collapsible"
+          :collapsed="group.collapsed"
+        />
       </div>
     </nav>
   </aside>
diff --git a/src/client/theme-default/components/VPSidebarGroup.vue b/src/client/theme-default/components/VPSidebarGroup.vue
index 73c513fd..becf39b3 100644
--- a/src/client/theme-default/components/VPSidebarGroup.vue
+++ b/src/client/theme-default/components/VPSidebarGroup.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   text: string
   items: DefaultTheme.SidebarItem[]
   collapsible?: boolean
+  collapsed?: boolean
 }>()
 
 const collapsed = ref(false)
@@ -14,16 +15,20 @@ const itemsDiv = ref<HTMLDivElement | null>(null)
 const height = ref('')
 
 const storeHeight = () => {
-  height.value = itemsDiv.value?.clientHeight + 'px'
+  if (!collapsed.value) height.value = itemsDiv.value?.clientHeight + 'px'
 }
 
 const toggle = () => {
   if (!props.collapsible) return
-  if (!collapsed.value) storeHeight()
+  storeHeight()
   collapsed.value = !collapsed.value
 }
 
-onMounted(storeHeight)
+onMounted(() => {
+  if (!props.collapsible) return
+  storeHeight()
+  collapsed.value = !!props.collapsed 
+})
 </script>
 
 <template>
@@ -84,13 +89,13 @@ onMounted(storeHeight)
 }
 
 .items {
-  height: v-bind('height');
-  transition: height 0.5s;
+  max-height: v-bind('height');
+  transition: max-height 0.5s;
   overflow: hidden;
 }
 
 .items.collapsed {
-  height: 0;
+  max-height: 0;
   margin-bottom: -22px;
 }
 
diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index 3b270430..0a316094 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -10,6 +10,10 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+html.dark {
+  color-scheme: dark;
+}
+
 body {
   margin: 0;
   width: 100%;
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 67f9e85a..6a526e92 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -82,7 +82,12 @@ export namespace DefaultTheme {
   export interface SidebarGroup {
     text: string
     items: SidebarItem[]
+    // If `true`, toggle button is shown.
+    // Default: false
     collapsible?: boolean
+    // If `true`, collapsible group is collapsed by default.
+    // Default: false
+    collapsed?: boolean
   }
 
   export interface SidebarItem {