clickable theme extends vite-pages-theme-doc

a custom theme of vite-plugin-react-pages (vite-pages) ,simply extends topNavs type in official-theme.

features

customize menu item, with two features

1. click events
2. set JSX Element instead of string.
3. compitable with official theme [email protected]

My component library have 30+ themes, so I can make the top Nav menu act as a theme selector.

usage

be careful, '@shawspring/vite-pages-theme-doc' replace 'vite-plugin-react-pages'

npm install -D @shawspring/vite-pages-theme-doc

import { createTheme } from '@shawspring/vite-pages-theme-doc'
 createTheme({
  topNavs: [
    {
      subMenu: 'themes',
      icon: '🎨',
      children: [
        {
          key: 'light',
          onclick: ({ key, domEvent }) => {
            setTheme(key) //   😕
          },
          element: <jsx-element/>, // 😽
        },
        {
          key: 'dark',
          ...
        }
        ...
      ],
    },
  ],
  ...
 })

type definition

type MenuConfig =
... // original type
  | {
      readonly key: string
      readonly element: React.JSX.Element | string
      onclick?: TitleClick
    }

source code