vuepress-theme-dynamicsidebar v1.0.0

VuePress Theme - Dynamic Sidebar

A Drag and Drop Documentation Library Solution

This custom VuePress theme creates sidebar navigation dynamically based on folder content

Instructions

1. Install Vuepress
2. Require this theme

   yarn add -D vuepress-theme-dynamicsidebar

3. In .vuepress/config.js, set up your Nav links to folders

module.exports = {
  title: 'Document Library',
  themeConfig: {
    sidebarDepth: 2,
    nav: [{
        text: 'Folder',
        link: '/folder/'
      },
      {
        text: 'Folder 2.0',
        link: '/folder20/'
      }
    ],

4. Now, setup those folders to appear in the Sidebar when clicked on the Navbar

NOTE: capitalization and periods are allowed to be the only differences between the path/link and the title. To account for other differences, you may edit the regex shown in the later section of this readme

  themeConfig: {
    sidebar: {
      '/folder20/': [{
        title: 'Folder2.0',
        collapsable: false,
        // CHILDREN ARE NOW AUTOMATICALLY CREATED WHEN DROPPED INTO THE AMS and AMS20 FOLDERS!
        // Custom code in Layout.vue handles this.
        // children: [
        //   'Document-1',
        //   'Document-2',
        //   'Document-3'
        // ]
      }],
      '/folder/': [{
        title: 'Folder',
        collapsable: false,
      }]
    }
  }

• All markdown documentation that is dropped into these folders will appear in the sidebar after selecting that folder in the navbar!
• In the sidebar, the documentation will appear in the same alphabetical order that documents are stored in the filesystem.

The code in Layout.vue that handles this functionality

If you want to eject the VuePress theme and customize it yourself, below is the code that handles this functionality.

  computed: {
  //Get the links from the filepaths rather than the config.js so that the sidebar is dynamic
    sidebarItemsFromFile () {      
      if (this.sidebarItems.length !== 0) {
        let arr = []
        let folder = this.sidebarItems[0].title.toLowerCase().replace(/\./g,'')
        let item = {
            type: "group",
            title: this.sidebarItems[0].title,
            children: this.$site.pages.filter( page => page.path.startsWith(`/${folder}/`) && page.path != `/${folder}/`),
            collapsable: false
          }
        arr.push(item)
        return arr
      } else {
        return this.sidebarItems
      }
    }
  }

Then use sidebarItemsFromFile where sidebarItems is used in the Vue template