Sidebar Error `Invalid prop "items"` when creating sidebar inside of themeconfig

[LovelyAndy]

Describe the bug

I cannot seem to get the sidebar working properly and get these warnings and errors when attempting to create one:

Reproduction

My .vitepress/config.js file looks like this right now since I am just starting to write my documentation:

export default {
  title: 'Magnetar Docs',
  themeConfig: {
    nav: [
      {
        text: 'Changelog',
        link: 'https://github.com/CyCraft/magnetar/blob/production/CHANGELOG.md',
      },
      { text: 'Github', link: 'https://github.com/cycraft/magnetar' },
    ],
    // sidebar: [{ text: 'About', items: [{ text: 'About', link: '/docs-main/about' }] }],
    sidebar: [{ text: 'About', link: '/docs-main/about' }],
  },
}

I thought I was using the same syntax as the docs use, but I still get this error.

However, if I use the synax in the commented out code with the items array, I obviously don't get the warnings and errors, but then the page looks like this and the second About route leads to a 404 page. It's also not how I want my sidebar to look.

Expected behavior

I just want my sidebar to look like it does in my quasar version, but obviously using vitepress. Simple sections with the subsections based on the markdown #, ##, ###'s. I see nothing in the documentation to help me achieve this however.

System Info

System:
    OS: macOS 12.5
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 23.31 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.5.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.24.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 90.0.2
    Firefox Developer Edition: 97.0
    Safari: 15.6
    Safari Technology Preview: 16.0

Additional context

My docs file list looks like this

.vitepress/theme/index.js looks like

import DefaultTheme from 'vitepress/theme'
import './custom.css'

export default DefaultTheme

Perhaps it has to do with this? I doubt that though.

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

For now, you can do this: https://stackblitz.com/edit/vite-hjnnuu?file=docs%2F.vitepress%2Fconfig.js

    sidebar: [
      {
        text: '', // <-- this shouldn't have been necessary, but there is some issue IG
        items: [
          { text: 'Introduction', link: '/guide/introduction' },
          { text: 'About', link: '/guide/about' },
        ],
      },
    ],

the second About route leads to a 404 page

Make that /about/ (<-- with trailing slash) since you have /about/index.md not /about.md.

Simple sections with the subsections based on the markdown #, ##, ###'s. I see nothing in the documentation to help me achieve this however.

Auto generating sidebar is not supported right now. We however generate the outline component from your headings. It is shown on right side on wider screens.

[LovelyAndy]

Thank you for the reply! In your last point you mentioned the aside element that is being generated. There's no way to just have that in the sidebar itself?

I've actually been trying to get rid of that as well since I'd really like everything to be handled on the left side of the screen like any normal bit of documentation. However, following the docs as setting the aside: false doesn't actually work. Is there also something I'm doing wrong there? Even if I don't write the layout type, it still doesn't seem to work; which feels like a bug to me; unless I'm writing it in the wrong spot.

Index.md (for my docs-main folder that holds all of the pages in it)

---
layout: doc
aside: false
---

# Docs Main

Thanks again for the comment and help so far!

[brc-dd]

following the docs as setting the aside: false doesn't actually work

It will be there in the next release.

[LovelyAndy]

Awesome! Well thank you for the help and information!

[brc-dd]

Ah, let's keep this issue open for now. We need to fix certain things like making text optional or allowing link directly at top level. This was reported on #846 too, but there too the OP closed it, so it went unnoticed.

[yyx990803]

AFAIK, the original usage:

sidebar: [
  { text: 'About', link: '/docs-main/about' }
]

Works as intended now.