render docs sidebar and navbar on a regular page

[smblee]

I have the home page /src/pages/index.tsx, which uses <Layout>...</Layout> to render the page content.

Is it possible to render the docs sidebar and navbar on the home page component?

Doing so in docusarus.config.ts will just link to the root doc.

 navbar: {
      items: [
        {
          type: 'doc',
          position: 'left',
          docId: 'main',
          label: 'Docs',
        },
      ],
    },

I would like the navbar to have the fully expanded docs (along with other items). And also render the docs sidebar component on the left

[slorber]

Is it possible to render the docs sidebar and navbar on the home page component?

The navbar (at the top) is already part of the <Layout> so it should be easy. Our own website (and the default init templates) already renders the navbar at the top of the homepage.

The docs sidebar as its name implies, is a docs-plugin related component and can only be rendered on docs-plugin created pages.

An option to achieve something equivalent would be to make your home an actual doc:

https://docusaurus.io/docs/next/docs-introduction#docs-only-mode

I would like the navbar to have the fully expanded docs (along with other items)

I have no idea what you mean, please draw a mockup

[smblee]

@slorber getting back to this again –

What i meant is that I have the following setup ondocusaurus.config.ts

const config: Config = {
...,
themeConfig:  { 
navbar: {}, // use custom navbar
},
...,
presets: [
    [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      {
        docs: {
          routeBasePath: '/',
          sidebarPath: './sidebars.js',
          remarkPlugins: [math],
          rehypePlugins: [katex],
          includeCurrentVersion: true,
        },
        }
   ]
   ]
}

Notably: no blog, docs routeBasePath set to/, uses sidebars and empty navbar in themeConfig.

My sidebars.js looks like

/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
  main: [
    {
      type: 'category',
      label: 'Concepts',
      link: {
        type: 'doc',
        id: 'concepts/overview',
      },
      items: [
        {
          type: 'autogenerated',
          dirName: 'concepts',
        },
      ],
    },
    {
      type: 'category',
      label: 'Contracts',
      link: {
        type: 'doc',
        id: 'contracts/v4/overview',
      },
      items: [
        {
          type: 'autogenerated',
          dirName: 'contracts',
        },
      ],
    },
    {
      type: 'category',
      label: 'SDKs',
      link: {
        type: 'doc',
        id: 'sdk/v4/overview',
      },
      items: [
        {
          type: 'autogenerated',
          dirName: 'sdk',
        },
      ],
    },
    {
      type: 'category',
      label: 'APIs',
      link: {
        type: 'doc',
        id: 'api/subgraph/overview',
      },
      items: [
        {
          type: 'autogenerated',
          dirName: 'api',
        },
      ],
    },
  ],
}

With this, if we try rendering the mobile navbar on an actual docs page, you see the following with all 4 different expandable categories (which is what i expect to see everywhere).

However, if we open the menu on / (home page), we see an empty menu bar – the use case is I want to still see whats shown in the above screenshot (in any docs page) on the home page as well.

[slorber]

So my answer is the same, that sidebar can only show on a docs page, and you would need to make your home an actual doc.

https://docusaurus.io/docs/docs-introduction#docs-only-mode