How do I add title sections within the sidebar?

[StephenTangCook]

For example, the Nextra docs site has "Themes" and "More" sub-sections:

[mutasim77]

If we look at the source code in the pages/docs/_meta.json directory, we can see something like this:

{
  "index": "Introduction",
  "guide": "",
  "-- Themes": {
    "type": "separator",
    "title": "Themes"
....
},

You may wonder how this works. Look, we are passing a type of separator. Now, in your theme.config.ts file, we can add something like this to ur configurations:

const config: DocsThemeConfig = {
  ...,
  sidebar: {
    titleComponent({ title, type }) {
      if (type === 'separator') {
        return <span className="cursor-default">{title}</span>;
      }
      return <>{title}</>;
    },
    defaultMenuCollapseLevel: 1,
    toggleButton: true
  },
}