From f2445c1de9b69847a5986665dc843f71df123e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Wed, 13 Jul 2022 22:58:19 +0200
Subject: [PATCH 1/2] feat: add hide right sidebar configuration option

---
 docs/config/frontmatter-configs.md              | 15 +++++++++++++++
 src/client/theme-default/components/VPDoc.vue   |  9 ++++++---
 src/client/theme-default/composables/sidebar.ts |  8 ++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/docs/config/frontmatter-configs.md b/docs/config/frontmatter-configs.md
index 25dd222c182e..dc624ff616fe 100644
--- a/docs/config/frontmatter-configs.md
+++ b/docs/config/frontmatter-configs.md
@@ -199,3 +199,18 @@ interface Feature {
   details: string
 }
 ```
+
+## rightsidebar
+
+- Type: `boolean`
+
+This option only take effect when `layout` is set to `page`.
+
+By default, the right aside will be shown, if you want to remove it, configure the option to `false`:
+
+```yaml
+---
+rightsidebar: false
+---
+```
+
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index c55766781951..eefc803a6150 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -6,7 +6,7 @@ import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const route = useRoute()
-const { hasSidebar } = useSidebar()
+const { hasSidebar, hasRightSidebar } = useSidebar()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
@@ -16,7 +16,7 @@ const pageName = computed(() =>
 <template>
   <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar }">
     <div class="container">
-      <div class="aside">
+      <div v-if="hasRightSidebar" class="aside">
         <div class="aside-curtain" />
         <div class="aside-container">
           <div class="aside-content">
@@ -33,7 +33,7 @@ const pageName = computed(() =>
       </div>
 
       <div class="content">
-        <div class="content-container">
+        <div class="content-container" :class="{ 'has-right-sidebar': hasRightSidebar }">
           <slot name="doc-before" />
 
           <main class="main">
@@ -170,6 +170,9 @@ const pageName = computed(() =>
 
 .content-container {
   margin: 0 auto;
+}
+
+.content-container.has-right-sidebar {
   max-width: 688px;
 }
 </style>
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index 123fe9cc74db..dd4a8e76901a 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -22,6 +22,13 @@ export function useSidebar() {
     )
   })
 
+  const hasRightSidebar = computed(() => {
+    if (frontmatter.value.layout !== 'home' && frontmatter.value.rightsidebar === false)
+      return false
+
+    return hasSidebar.value
+  })
+
   function open() {
     isOpen.value = true
   }
@@ -38,6 +45,7 @@ export function useSidebar() {
     isOpen,
     sidebar,
     hasSidebar,
+    hasRightSidebar,
     open,
     close,
     toggle

From 6f5ada70c809960d04cc3bb31e0cbeb856ad5b55 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Thu, 14 Jul 2022 12:07:11 +0530
Subject: [PATCH 2/2] chore: rename option to aside

---
 docs/config/frontmatter-configs.md              | 10 ++++------
 src/client/theme-default/components/VPDoc.vue   | 13 ++++++++-----
 src/client/theme-default/composables/sidebar.ts |  9 ++++++---
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/docs/config/frontmatter-configs.md b/docs/config/frontmatter-configs.md
index dc624ff616fe..8503a5eda478 100644
--- a/docs/config/frontmatter-configs.md
+++ b/docs/config/frontmatter-configs.md
@@ -200,17 +200,15 @@ interface Feature {
 }
 ```
 
-## rightsidebar
+## aside
 
 - Type: `boolean`
+- Default: `true`
 
-This option only take effect when `layout` is set to `page`.
-
-By default, the right aside will be shown, if you want to remove it, configure the option to `false`:
+If you want the right aside component in `doc` layout not to be shown, set this option to `false`.
 
 ```yaml
 ---
-rightsidebar: false
+aside: false
 ---
 ```
-
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index eefc803a6150..9f07347d68e8 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -6,7 +6,7 @@ import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const route = useRoute()
-const { hasSidebar, hasRightSidebar } = useSidebar()
+const { hasSidebar, hasAside } = useSidebar()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
@@ -14,9 +14,12 @@ const pageName = computed(() =>
 </script>
 
 <template>
-  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar }">
+  <div
+    class="VPDoc"
+    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
+  >
     <div class="container">
-      <div v-if="hasRightSidebar" class="aside">
+      <div v-if="hasAside" class="aside">
         <div class="aside-curtain" />
         <div class="aside-container">
           <div class="aside-content">
@@ -33,7 +36,7 @@ const pageName = computed(() =>
       </div>
 
       <div class="content">
-        <div class="content-container" :class="{ 'has-right-sidebar': hasRightSidebar }">
+        <div class="content-container">
           <slot name="doc-before" />
 
           <main class="main">
@@ -172,7 +175,7 @@ const pageName = computed(() =>
   margin: 0 auto;
 }
 
-.content-container.has-right-sidebar {
+.VPDoc.has-aside .content-container {
   max-width: 688px;
 }
 </style>
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index dd4a8e76901a..af73c491933b 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -22,8 +22,11 @@ export function useSidebar() {
     )
   })
 
-  const hasRightSidebar = computed(() => {
-    if (frontmatter.value.layout !== 'home' && frontmatter.value.rightsidebar === false)
+  const hasAside = computed(() => {
+    if (
+      frontmatter.value.layout !== 'home' &&
+      frontmatter.value.aside === false
+    )
       return false
 
     return hasSidebar.value
@@ -45,7 +48,7 @@ export function useSidebar() {
     isOpen,
     sidebar,
     hasSidebar,
-    hasRightSidebar,
+    hasAside,
     open,
     close,
     toggle