CODEWITHSUNDEEP
docusaurus
johnnymatthews
johnnymatthews

Reputation: 1041

Show different sidebar based on the current page

Is it possible to show different sidebars depending on what section of the site you're in? So if I had two sections (Books and Countries) then I could show the corresponding sidebar menu object:

module.exports = {
    books: {
        "Children's Book": [
            "books/childrens-books/winnie-the-pooh",
            "books/childrens-books/harry-potter",
        ],
        "Non-Fiction": [
            "books/non-fiction/hitchikers-guide",
            "books/non-fiction/a-history-of-england",
        ]
    },
    countries: {
        "Europe": [
            "countries/europe/england",
            "countries/europe/france",
            "countries/europe/spain",
        ],
        "Asia": [
            "countries/asia/china",
            "countries/asia/india",
            "countries/asia/laos",
        ],
    },
}

The docs do reference that something like this could be done, but there aren't any examples to go along with it:

You can have multiple sidebars for different Markdown files by adding more top-level keys to the exported object.

The only other place I can find sidebars referenced is in docusaurus.config.js, but I'm not sure what this section is for:

presets: [
    [
        '@docusaurus/preset-classic',
            {
                docs: {
                    sidebarPath: require.resolve('./sidebars.js'),
                },
...

Any pointers appreciated!

Upvotes: 2

Views: 1375

Answers (2)

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20269

Yes, You can also do this using multiple sidebars.

export default {
  booksSidebar: {
    'childrens-books':
      [
        "harry-potter",
        "winnie-the-pooh",
      ],
  },
  countriesSidebar: {
    'asia': [
      'china',
      'india',
      'laos'
    ],
    'europe': [
      'england',
      'france',
      'spain'
    ]
  }
};

Then add a frontmatter to your files that specifies which sidebar to choose.

e.g harry-potter.md

---
sidebar_position: 1
id: harry-potter
title: Harry Potter
displayed_sidebar: booksSidebar
---

Upvotes: 1

johnnymatthews
johnnymatthews

Reputation: 1041

So the issue was that my content structure didn't match what I had in sidebar.js. This is my content structure now:

docs
├── README.md
├── books
│   ├── childrens-books
│   │   ├── harry-potter.md
│   │   └── winnie-the-pooh.md
│   └── non-fiction
│       ├── a-history-of-england.md
│       └── hitchikers-guide.md
└── countries
    ├── asia
    │   ├── china.md
    │   ├── india.md
    │   └── laos.md
    └── europe
        ├── england.md
        ├── france.md
        └── spain.md
├── docs
├── docusaurus.config.js
├── sidebars.js
└── src

I think the issue lay in the fact that Docusaurus couldn't find the articles I was referencing, so it just didn't parse.

With this set up URLs like localhost:3000/docs/books/childrens-books/harry-potter will work fine, but localhost:3000/docs/books/childrens-books/ will return a blank page since there's no corresponding article for that URL.

Upvotes: 1

Related Questions