feat(theme): support support multi-level nav menus(#2462)

packages/theme-default/src/components/Nav/NavMenuGroup.tsx

@@ -1,14 +1,13 @@
 import {
   matchNavbar,
   type NavItem,
-  type NavItemWithChildren,
   type NavItemWithLink,
-  type NavItemWithLinkAndChildren,
 } from '@rspress/shared';
 import { Link, Tag } from '@theme';
 import Down from '@theme-assets/down';
 import { useRef, useState } from 'react';
 import { SvgWrapper } from '../SvgWrapper';
+import * as styles from './index.module.scss';
 import { NavMenuSingleItem } from './NavMenuSingleItem';
 
 export interface NavMenuGroupItem {
@@ -42,21 +41,26 @@ function ActiveGroupItem({ item }: { item: NavItemWithLink }) {
 }
 
 function NormalGroupItem({ item }: { item: NavItemWithLink }) {
+  const content = (
+    <div
+      className={`rp-rounded-2xl ${item.link ? 'hover:rp-bg-mute' : ''}`}
+      style={{
+        padding: '0.4rem 1.5rem 0.4rem 0.75rem',
+      }}
+    >
+      <div className="rp-flex">
+        {item.tag && <Tag tag={item.tag} />}
+        <span>{item.text}</span>
+      </div>
+    </div>
+  );
   return (
     <div key={item.link} className="rp-font-medium rp-my-1">
-      <Link href={item.link}>
-        <div
-          className="rp-rounded-2xl hover:rp-bg-mute"
-          style={{
-            padding: '0.4rem 1.5rem 0.4rem 0.75rem',
-          }}
-        >
-          <div className="rp-flex">
-            {item.tag && <Tag tag={item.tag} />}
-            <span>{item.text}</span>
-          </div>
-        </div>
-      </Link>
+      {item.link ? (
+        <Link href={item.link}>{content}</Link>
+      ) : (
+        <div style={{ padding: ' 0 0 0 0.4rem' }}>{content}</div>
+      )}
     </div>
   );
 }
@@ -96,21 +100,21 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
     }
     return <NormalGroupItem key={item.link} item={item} />;
   };
-  const renderGroup = (
-    item: NavItemWithChildren | NavItemWithLinkAndChildren,
-  ) => {
-    return (
-      <div>
-        {'link' in item ? (
-          renderLinkItem(item as NavItemWithLink)
-        ) : (
-          <p className="rp-font-bold rp-text-gray-400 rp-my-1 not:first:rp-border">
-            {item.text}
-          </p>
-        )}
-        {item.items.map(renderLinkItem)}
-      </div>
-    );
+  const renderGroup = (items: NavItem[]) => {
+    return items.map(item => {
+      return (
+        <div className={styles.navGroup} key={item.text}>
+          {'items' in item ? (
+            <>
+              {renderLinkItem(item as NavItemWithLink)}
+              {renderGroup(item.items)}
+            </>
+          ) : (
+            renderLinkItem(item)
+          )}
+        </div>
+      );
+    });
   };
   return (
     <div
@@ -163,7 +167,14 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
           {groupItems.map(item => {
             return (
               <div key={item.text}>
-                {'items' in item ? renderGroup(item) : renderLinkItem(item)}
+                {'items' in item ? (
+                  <>
+                    {renderLinkItem(item as NavItemWithLink)}
+                    {renderGroup(item.items)}
+                  </>
+                ) : (
+                  renderLinkItem(item)
+                )}
               </div>
             );
           })}

packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx

@@ -19,19 +19,23 @@ export function NavMenuSingleItem(
 ) {
   const { pathname } = item;
   const isActive = new RegExp(item.activeMatch || item.link).test(pathname);
-
-  return (
+  const content = (
+    <div
+      key={item.text}
+      className={`rspress-nav-menu-item ${styles.singleItem} ${
+        isActive ? `${styles.activeItem} rspress-nav-menu-item-active` : ''
+      } rp-text-sm rp-font-medium rp-mx-0.5 rp-px-3 rp-py-2 rp-flex rp-items-center`}
+    >
+      <Tag tag={item.tag} />
+      {item.text}
+      {item.rightIcon}
+    </div>
+  );
+  return item.link ? (
     <Link href={normalizeHref(item.link)} onClick={item.onClick}>
-      <div
-        key={item.text}
-        className={`rspress-nav-menu-item ${styles.singleItem} ${
-          isActive ? `${styles.activeItem} rspress-nav-menu-item-active` : ''
-        } rp-text-sm rp-font-medium rp-mx-0.5 rp-px-3 rp-py-2 rp-flex rp-items-center`}
-      >
-        <Tag tag={item.tag} />
-        {item.text}
-        {item.rightIcon}
-      </div>
+      {content}
     </Link>
+  ) : (
+    content
   );
 }

packages/theme-default/src/components/Nav/index.module.scss

@@ -55,6 +55,9 @@
 .rightNav {
   display: none;
 }
+.navGroup {
+  padding-left: 1em;
+}
 
 .singleItem {
   word-break: keep-all;