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 vite-pages-theme-doc@5.0.0

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'

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

1import { createTheme } from '@shawspring/vite-pages-theme-doc'
2 createTheme({
3  topNavs: [
4    {
5      subMenu: 'themes',
6      icon: '🎨',
7      children: [
8        {
9          key: 'light',
10          onclick: ({ key, domEvent }) => {
11            setTheme(key) //   😕
12          },
13          element: <jsx-element/>, // 😽
14        },
15        {
16          key: 'dark',
17          ...
18        }
19        ...
20      ],
21    },
22  ],
23  ...
24 })

type definition

1type MenuConfig =
2... // original type
3  | {
4      readonly key: string
5      readonly element: React.JSX.Element | string
6      onclick?: TitleClick
7    }

source code