Sidebar issue where pages are not showing

[Braunson]

Overview

I'm having a weird issue where the sidebar dropdown to show the generated GraphQL title/subtitle but no sub-pages but it exists in the HTML it's just not visible. See image below

Code

docusaurus.config.js

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  // .... boilerplate removed
  plugins: [
    require.resolve("@cmfcmf/docusaurus-search-local"),
    [
      "docusaurus-graphql-plugin",
      {
        schema: "schema.graphql",
        routeBasePath: "/docs/GraphQL/Foobar-API",
        sidebar: {
          label: "Foobar API",
          position: 1,
        },
      },
    ],
  ],

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          editUrl: 'https://github.com/foobar/edit',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'Home',
        logo: {
          alt: 'Home',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: 'doc',
            docId: 'setup',
            position: 'left',
            label: 'Documentation',
          },{
            type: 'doc',
            docId: 'GraphQL/Foobar-API/enums',
            position: 'left',
            label: 'GQL Foobar API',
          },
    }),
};

module.exports = config;

sidebar.js

/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
  graphQlApiSidebar: [
    "GraphQL/Foobar-API/queries",
    "GraphQL/Foobar-API/mutations",
    "GraphQL/Foobar-API/objects",
    "GraphQL/Foobar-API/interfaces",
    "GraphQL/Foobar-API/enums",
    "GraphQL/Foobar-API/unions",
    "GraphQL/Foobar-API/inputObjects",
    "GraphQL/Foobar-API/scalars",
  ]
};

module.exports = sidebars;

I can confirm the items are generated in docs/GraphQL/Foobar-API/*

[zhouzi]

I think it should be possible to track down why they are not visible with the browser's inspector. I suspect it's an issue with the theme's CSS or JavaScript.

I might be able to help if you can publish the docs somewhere. You can use a GraphQL API from https://github.com/IvanGoncharov/graphql-apis if you don't want to expose yours.

[zhouzi]

@Braunson were you able to figure it out?

[Braunson]

@zhouzi I did not and ended up using another plugin.

[zhouzi]

Sorry to hear but glad you found a solution nonetheless 😉