How do I set multiple sidebars in vuepress？ - vuepress

Question

My directory structure is like this:
.
├─ README.md
├─ contact.md
├─ about.md
├─ foo/
| ├─ test/
| | ├─ README.md
| | ├─ three.md
| | └─ four.md
│ ├─ README.md
│ ├─ one.md
│ └─ two.md
└─ bar/
├─ README.md
└─ five.md
How do I update configuration to define my sidebar for each section and folder?

Answer 1

You can read full post here.
The Setup
$ npm install -g vue-cli
$ vue init webpack <project-name>
$ npm install --save vuex gsap
Vuex module
const types = {
TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'
}
// initial state
const state = {
sidebarOpen: false
}
// getters
const getters = {
sidebarOpen: state => state.sidebarOpen
}
// actions
const actions = {
toggleSidebar ({ commit, state }) {
commit(types.TOGGLE_SIDEBAR)
}
}
// mutations
const mutations = {
[types.TOGGLE_SIDEBAR] (state) {
state.sidebarOpen = !state.sidebarOpen
}
}
export default {
state,
getters,
actions,
mutations
}
Store
import Vue from 'vue'
import Vuex from 'vuex'
import ui from './modules/ui'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules: {
ui
},
strict: debug
})
You can see we import the UI module and add it as a module in the
exported Vuex.Store object. Now, all we have to do is add it to our
Vue instance.
import Vue from 'vue'
import App from './App'
import store from './store/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})
Components (Files) ...
APP.vue
<template>
<div id="app">
<div :class="$style.container">
</div>
<sidebar/>
<sidebar-toggle/>
</div>
</template>
<script>
import Sidebar from '#/components/sidebar.vue'
import SidebarToggle from '#/components/sidebarToggle.vue'
export default {
name: 'app',
components: {
Sidebar, SidebarToggle
}
}
</script>
<style>
:root{
--accent-color: #FFCB08;
--primary-color: #820263;
--dark-color: #2E294E;
}
*{
box-sizing: border-box;
}
</style>
<style module>
.container{
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background-color: var(--primary-color);
}
</style>
sidebar toogle
<template>
<button :class="[open ? $style.active : '', $style.button]" #click="handleClick">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
</svg>
</button>
</template>
<script>
import {TweenMax, Power4} from 'gsap'
export default {
name: 'sidebar-toggle',
computed: {
open () {
return this.$store.state.ui.sidebarOpen
}
},
methods: {
handleClick () {
this.$store.dispatch('toggleSidebar')
}
}
}
</script>
sidebar
<template>
<div :class="$style.sidebar"/>
</template>
<script>
import {TweenMax, Power4} from 'gsap'
export default {
name: 'sidebar',
mounted () {
TweenMax.set(this.$el, {
x: this.$el.offsetWidth
})
},
computed: {
open () {
return this.$store.state.ui.sidebarOpen
}
},
watch: {
open: function (open) {
const dX = open ? 0 : this.$el.offsetWidth
TweenMax.to(this.$el, 0.6, {
x: dX,
ease: Power4.easeOut
})
}
}
}
</script>
Demo Structure for routes
{//For Dropdown
"name":"Settings",
"route":undefined,
"icon":"/assets/icons/ic_settings_white_24px.svg",//"/assets/icons/ic_settings_black_24px.svg"
"children":[
{
"name":"Generate Code",
"route":"settings/code"
},
{
"name":"Subscription Layout",
"route":"settings/layout"
},
{
"name":"Plans",
"route":"settings/plans"
}
]
}
{//For Routes
"name":"Settings",
"route":"/settings",
"icon":"/assets/icons/ic_settings_white_24px.svg",//"/assets/icons/ic_settings_black_24px.svg"
"children":[]
}

Answer 2

You can see an example of how to achieve this in the docs here - https://vuepress.vuejs.org/theme/default-theme-config.html#multiple-sidebars