feat: add a theme option for hiding doc plugin sidebar

packages/docusaurus-playground/docusaurus.config.js

@@ -8,9 +8,7 @@ const config = {
   url: 'https://url',
   baseUrl: '/',
 
-  customFields: {
-    ghostAPiKey: process.env.GHOST_API_KEY,
-  },
+  customFields: {},
   markdown: {
     mermaid: true,
   },
@@ -33,6 +31,13 @@ const config = {
           name: 'default',
           options: {
             customCss: [require.resolve('./src/css/custom.scss')],
+            docs: {
+              default: {
+                sidebar: {
+                  hide: true,
+                },
+              },
+            },
           },
         },
         docs: {

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -871,3 +871,9 @@ small {
     padding-inline: 0;
   }
 }
+
+[data-hidden-doc-sidebar='true'] {
+  .theme-doc-sidebar-container {
+    display: none;
+  }
+}

packages/logos-docusaurus-theme/src/client/lib/useThemeOptions.ts

@@ -0,0 +1,17 @@
+import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/index.js'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import { DocConfig, ThemeOptions } from '../types/theme.types'
+
+export const useThemeOptions = (): ThemeOptions => {
+  const {
+    siteConfig: { customFields = {} },
+  } = useDocusaurusContext()
+
+  return (customFields['logos-docusaurus-theme'] ?? {}) as ThemeOptions
+}
+
+export const useDocThemeOptions = (): DocConfig => {
+  const activePlugin = useActivePlugin()
+  const themeOptions = useThemeOptions()
+  return activePlugin ? themeOptions?.docs?.[activePlugin?.pluginId] ?? {} : {}
+}

packages/logos-docusaurus-theme/src/client/theme/Root.tsx

@@ -4,10 +4,15 @@ import {
   useColorMode,
 } from '@docusaurus/theme-common/internal'
 import React from 'react'
+import { useDocThemeOptions } from '../lib/useThemeOptions'
 import styles from './style.module.css'
 
 const Content = ({ children }) => {
   const colorMode = useColorMode()
+
+  const options = useDocThemeOptions()
+  const hideDocSidebar = options?.sidebar?.hide
+
   return (
     <ThemeProvider
       theme={
@@ -16,7 +21,9 @@ const Content = ({ children }) => {
           : defaultThemes.light
       }
     >
-      <div className={styles.root}>{children}</div>
+      <div className={styles.root} data-hidden-doc-sidebar={hideDocSidebar}>
+        {children}
+      </div>
     </ThemeProvider>
   )
 }

packages/logos-docusaurus-theme/src/client/types/theme.types.ts

@@ -0,0 +1,9 @@
+export type DocConfig = {
+  sidebar?: {
+    hide?: boolean
+  }
+}
+
+export type ThemeOptions = {
+  docs?: Record<string, DocConfig>
+}

packages/logos-docusaurus-theme/src/index.ts

@@ -1,6 +1,10 @@
-import type { PluginOptions } from '@docusaurus/theme-classic'
+import type { PluginOptions as DefaultPluginOptions } from '@docusaurus/theme-classic'
 import type { LoadContext, Plugin } from '@docusaurus/types'
+import _ from 'lodash'
 import path from 'path'
+import type { ThemeOptions } from './client/types/theme.types'
+
+export type PluginOptions = DefaultPluginOptions & ThemeOptions
 
 export default function logosTheme(
   context: LoadContext,
@@ -9,13 +13,24 @@ export default function logosTheme(
   const clientModules: string[] = [
     path.resolve(__dirname, './client/css/custom.scss'),
   ]
-
   if (options.customCss) {
     if (typeof options.customCss === 'string')
       clientModules.push(options.customCss)
     else clientModules.push(...options.customCss)
   }
 
+  context.siteConfig.customFields = {
+    ...(context.siteConfig.customFields ?? {}),
+    'logos-docusaurus-theme': {
+      ...options,
+      ...(_.get(
+        context,
+        'siteConfig.customFields.logos-docusaurus-theme',
+        {},
+      ) as object),
+    },
+  }
+
   return {
     name: 'logos-docusaurus-theme',
 
@@ -27,5 +42,3 @@ export default function logosTheme(
     getClientModules: () => clientModules,
   }
 }
-
-export { PluginOptions }