From 9e3cf0fa7d2c2589d129ef931457ab40f513d187 Mon Sep 17 00:00:00 2001
From: John Campion Jr <john@brightshore.com>
Date: Mon, 27 Mar 2023 15:08:11 -0400
Subject: [PATCH] feat(theme): allow moving aside to left (#2138)

---
 docs/reference/default-theme-config.md          |  6 ++++--
 docs/reference/frontmatter-config.md            |  8 ++++++--
 src/client/theme-default/components/VPDoc.vue   | 10 ++++++++--
 src/client/theme-default/composables/sidebar.ts |  9 +++++++++
 types/default-theme.d.ts                        |  4 +++-
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/docs/reference/default-theme-config.md b/docs/reference/default-theme-config.md
index a35aec2c..80c17139 100644
--- a/docs/reference/default-theme-config.md
+++ b/docs/reference/default-theme-config.md
@@ -166,11 +166,13 @@ export type SidebarItem = {
 
 ## aside
 
-- Type: `boolean`
+- Type: `boolean | 'left'`
 - Default: `true`
 - Can be overridden per page via [frontmatter](./frontmatter-config#aside)
 
-Setting this value to `false` prevents rendering of aside container.
+Setting this value to `false` prevents rendering of aside container.\
+Setting this value to `true` renders the aside to the right.\
+Setting this value to `left` renders the aside to the left.
 
 ## outline
 
diff --git a/docs/reference/frontmatter-config.md b/docs/reference/frontmatter-config.md
index 4322d985..9008e2b9 100644
--- a/docs/reference/frontmatter-config.md
+++ b/docs/reference/frontmatter-config.md
@@ -113,10 +113,14 @@ Defines items to display in features section when `layout` is set to `home`. Mor
 
 ### aside <Badge type="info" text="default theme only" />
 
-- Type: `boolean`
+- Type: `boolean | 'left'`
 - Default: `true`
 
-If you want the right aside component in `doc` layout not to be shown, set this option to `false`.
+Defines the location of the aside component in the `doc` layout.
+
+Setting this value to `false` prevents rendering of aside container.\
+Setting this value to `true` renders the aside to the right.\
+Setting this value to `'left'` renders the aside to the left.
 
 ```yaml
 ---
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 7c9109d8..3f4d8c3e 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -7,7 +7,7 @@ import VPDocFooter from './VPDocFooter.vue'
 import VPDocOutlineDropdown from './VPDocOutlineDropdown.vue'
 
 const route = useRoute()
-const { hasSidebar, hasAside } = useSidebar()
+const { hasSidebar, hasAside, leftAside } = useSidebar()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
@@ -21,7 +21,7 @@ const pageName = computed(() =>
   >
     <slot name="doc-top" />
     <div class="container">
-      <div v-if="hasAside" class="aside">
+      <div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
         <div class="aside-curtain" />
         <div class="aside-container">
           <div class="aside-content">
@@ -129,6 +129,12 @@ const pageName = computed(() =>
   max-width: 256px;
 }
 
+.left-aside {
+  order: 1;
+  padding-left: unset;
+  padding-right: 32px;
+}
+
 .aside-container {
   position: fixed;
   top: 0;
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index 4ac93527..df307d3c 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -49,6 +49,14 @@ export function useSidebar() {
     )
   })
 
+  const leftAside = computed(() => {
+    if (hasAside)
+      return frontmatter.value.aside == null
+        ? theme.value.aside === 'left'
+        : frontmatter.value.aside === 'left'
+    return false
+  })
+
   const hasAside = computed(() => {
     if (frontmatter.value.layout === 'home') return false
     if (frontmatter.value.aside != null) return !!frontmatter.value.aside
@@ -80,6 +88,7 @@ export function useSidebar() {
     sidebarGroups,
     hasSidebar,
     hasAside,
+    leftAside,
     isSidebarEnabled,
     open,
     close,
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 7379321e..52003849 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -42,10 +42,12 @@ export namespace DefaultTheme {
 
     /**
      * Set to `false` to prevent rendering of aside container.
+     * Set to `true` to render the aside to the right.
+     * Set to `left` to render the aside to the left.
      *
      * @default true
      */
-    aside?: boolean
+    aside?: boolean | 'left'
 
     /**
      * Info for the edit link. If it's undefined, the edit link feature will