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

pull/2160/head
John Campion Jr 2 years ago committed by GitHub
parent b441b22a79
commit 9e3cf0fa7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

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

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

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

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

Loading…
Cancel
Save