feat(plugin-docs): Add dropdown for nav items
MODIFY
packages/plugin-docs/client/theme-doc/NavBar.tsx
packages/plugin-docs/client/theme-doc/NavBar.tsx
-import React from 'react';
+import React, { useState } from 'react';
import { useThemeContext } from './context';
import useLanguage from './useLanguage';
export default () => {
- const { components, themeConfig } = useThemeContext()!;
- const lang = useLanguage();
+ const { themeConfig } = useThemeContext()!;
return (
<ul className="flex">
- {themeConfig.navs.map((nav: any) => {
+ {themeConfig.navs.map((nav: any) => (
+ <NavItem nav={nav} key={nav.path} />
+ ))}
+ </ul>
+ );
+};
+
+interface NavItemProps {
+ nav: {
+ path: string;
+ title: string;
+ dropdown?: {
+ title: string;
+ path: string;
+ }[];
+ };
+}
+
+function NavItem(props: NavItemProps) {
+ const { components } = useThemeContext()!;
+ const { nav } = props;
+ const lang = useLanguage();
+ const [isExpanded, setExpanded] = useState(false);
return (
- <li key={nav.path} className="ml-4 dark:text-white">
+ <li
+ className="ml-8 dark:text-white relative"
+ onMouseEnter={() => nav.dropdown && setExpanded(true)}
+ onMouseLeave={() => nav.dropdown && setExpanded(false)}
+ >
<components.Link
to={
- lang.isFromPath
- ? lang.currentLanguage?.locale + nav.path
- : nav.path
+ lang.isFromPath ? lang.currentLanguage?.locale + nav.path : nav.path
}
>
{lang.render(nav.title)}
</components.Link>
+ {nav.dropdown && (
+ <div
+ style={{ maxHeight: isExpanded ? nav.dropdown.length * 48 : 0 }}
+ className="absolute transition-all duration-300 w-32 rounded-lg
+ cursor-pointer shadow overflow-hidden top-8"
+ >
+ {nav.dropdown.map((n) => (
+ <components.Link
+ key={n.path}
+ to={
+ lang.isFromPath ? lang.currentLanguage?.locale + n.path : n.path
+ }
+ >
+ <p
+ className="p-2 bg-white dark:bg-gray-700 dark:text-white
+ hover:bg-gray-50 transition duration-300"
+ >
+ {n.title}
+ </p>
+ </components.Link>
+ ))}
+ </div>
+ )}
</li>
);
- })}
- </ul>
- );
-};
+}

MODIFY
packages/plugin-docs/client/theme-doc/context.ts
packages/plugin-docs/client/theme-doc/context.ts
@@ -22,6 +22,7 @@ interface IContext {
navs: {
path: string;
title: string;
+ dropdown?: { title: string; path: string }[];
children: any[];
}[];
announcement?: {

feat(plugin-docs): Add dropdown for nav items (#657)