feat(theme): allow moving aside to left (#2138)

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
 

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
 ---

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;

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,

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