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 ## aside
- Type: `boolean` - Type: `boolean | 'left'`
- Default: `true` - Default: `true`
- Can be overridden per page via [frontmatter](./frontmatter-config#aside) - 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 ## 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" /> ### aside <Badge type="info" text="default theme only" />
- Type: `boolean` - Type: `boolean | 'left'`
- Default: `true` - 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 ```yaml
--- ---

@ -7,7 +7,7 @@ import VPDocFooter from './VPDocFooter.vue'
import VPDocOutlineDropdown from './VPDocOutlineDropdown.vue' import VPDocOutlineDropdown from './VPDocOutlineDropdown.vue'
const route = useRoute() const route = useRoute()
const { hasSidebar, hasAside } = useSidebar() const { hasSidebar, hasAside, leftAside } = useSidebar()
const pageName = computed(() => const pageName = computed(() =>
route.path.replace(/[./]+/g, '_').replace(/_html$/, '') route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
@ -21,7 +21,7 @@ const pageName = computed(() =>
> >
<slot name="doc-top" /> <slot name="doc-top" />
<div class="container"> <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-curtain" />
<div class="aside-container"> <div class="aside-container">
<div class="aside-content"> <div class="aside-content">
@ -129,6 +129,12 @@ const pageName = computed(() =>
max-width: 256px; max-width: 256px;
} }
.left-aside {
order: 1;
padding-left: unset;
padding-right: 32px;
}
.aside-container { .aside-container {
position: fixed; position: fixed;
top: 0; 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(() => { const hasAside = computed(() => {
if (frontmatter.value.layout === 'home') return false if (frontmatter.value.layout === 'home') return false
if (frontmatter.value.aside != null) return !!frontmatter.value.aside if (frontmatter.value.aside != null) return !!frontmatter.value.aside
@ -80,6 +88,7 @@ export function useSidebar() {
sidebarGroups, sidebarGroups,
hasSidebar, hasSidebar,
hasAside, hasAside,
leftAside,
isSidebarEnabled, isSidebarEnabled,
open, open,
close, close,

@ -42,10 +42,12 @@ export namespace DefaultTheme {
/** /**
* Set to `false` to prevent rendering of aside container. * 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 * @default true
*/ */
aside?: boolean aside?: boolean | 'left'
/** /**
* Info for the edit link. If it's undefined, the edit link feature will * Info for the edit link. If it's undefined, the edit link feature will

Loading…
Cancel
Save