fix: close hamburger menu when click on item on mobile (#1712)

e2e/fixtures/nav-link-item-with-hash/doc/index.mdx

@@ -5,3 +5,4 @@ pageType: custom
 <div id="pageA">contentA</div>
 
 <div id="pageB">contentB</div>
+<div id="pageC">contentC</div>

e2e/fixtures/nav-link-item-with-hash/rspress.config.ts

@@ -18,6 +18,11 @@ export default defineConfig({
         link: '#pageB',
         position: 'right',
       },
+      {
+        text: 'PageC',
+        link: '#pageC',
+        position: 'right',
+      },
     ],
   },
 });

e2e/tests/nav-link-item-with-hash.test.ts

@@ -28,4 +28,18 @@ test.describe('basic test', async () => {
     await page.locator('.rspress-nav-menu a').nth(1).click();
     expect(page.url()).toContain('index#pageB');
   });
+
+  test('Close the hamburger menu when clicking on an item in mobile view', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 812 });
+
+    await page.goto(`http://localhost:${appPort}/`);
+
+    await page.locator('.rspress-mobile-hamburger').click();
+    await expect(page.locator('.rspress-nav-screen')).toBeVisible();
+
+    await page.getByRole('link', { name: 'PageC' }).click();
+    await expect(page.locator('.rspress-nav-screen')).not.toBeVisible();
+  });
 });

packages/theme-default/src/components/Link/index.tsx

@@ -97,7 +97,10 @@ export function Link(props: LinkProps) {
         className={`${styles.link} ${className} cursor-pointer`}
         rel={rel}
         target={target}
-        onClick={handleNavigate}
+        onClick={event => {
+          rest.onClick?.(event);
+          handleNavigate(event);
+        }}
         href={withBaseUrl}
       >
         {children}

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

@@ -13,6 +13,7 @@ interface Props {
   base: string;
   rightIcon?: React.ReactNode;
   compact?: boolean;
+  onClick?: () => void;
 }
 
 export function NavMenuSingleItem(
@@ -24,7 +25,7 @@ export function NavMenuSingleItem(
   );
 
   return (
-    <Link href={normalizeHref(item.link)}>
+    <Link href={normalizeHref(item.link)} onClick={item.onClick}>
       <div
         key={item.text}
         className={`rspress-nav-menu-item ${styles.singleItem} ${

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

@@ -22,7 +22,7 @@ export interface NavProps {
   afterNavMenu?: React.ReactNode;
 }
 
-const DEFAULT_NAV_POSTION = 'right';
+const DEFAULT_NAV_POSITION = 'right';
 
 export function Nav(props: NavProps) {
   const { beforeNavTitle, afterNavTitle, beforeNav, afterNavMenu, navTitle } =
@@ -83,7 +83,7 @@ export function Nav(props: NavProps) {
   const menuItems = useNavData();
 
   const getPosition = (menuItem: NavItem) =>
-    menuItem.position ?? DEFAULT_NAV_POSTION;
+    menuItem.position ?? DEFAULT_NAV_POSITION;
   // eslint-disable-next-line react/prop-types
   const leftMenuItems = menuItems.filter(item => getPosition(item) === 'left');
   // eslint-disable-next-line react/prop-types

packages/theme-default/src/components/NavHambmger/index.tsx

@@ -18,13 +18,14 @@ export function NavHamburger(props: Props) {
     <Fragment>
       <NavScreen
         isScreenOpen={isScreenOpen}
+        toggleScreen={toggleScreen}
         siteData={siteData}
         pathname={pathname}
       />
       <button
         onClick={toggleScreen}
         aria-label="mobile hamburger"
-        className={`${isScreenOpen ? styles.active : ''} ${
+        className={`${isScreenOpen ? styles.active : ''} rspress-mobile-hamburger ${
           styles.navHamburger
         } text-gray-500`}
       >

packages/theme-default/src/components/NavScreen/index.tsx

@@ -16,6 +16,7 @@ import { useNavData } from '../../logic/useNav';
 
 interface Props {
   isScreenOpen: boolean;
+  toggleScreen: () => void;
   siteData: SiteData<DefaultThemeConfig>;
   pathname: string;
 }
@@ -45,7 +46,7 @@ const NavScreenVersions = () => {
 };
 
 export function NavScreen(props: Props) {
-  const { isScreenOpen, siteData, pathname } = props;
+  const { isScreenOpen, toggleScreen, siteData, pathname } = props;
   const screen = useRef<HTMLDivElement | null>(null);
   const localesData = siteData.themeConfig.locales || [];
   const hasMultiLanguage = localesData.length > 1;
@@ -77,6 +78,7 @@ export function NavScreen(props: Props) {
                   key={item.text}
                   base={base}
                   langs={langs}
+                  onClick={toggleScreen}
                   {...item}
                 />
               ) : (
@@ -103,7 +105,7 @@ export function NavScreen(props: Props) {
   }, [isScreenOpen]);
   return (
     <div
-      className={`${styles.navScreen} ${isScreenOpen ? styles.active : ''}`}
+      className={`${styles.navScreen} ${isScreenOpen ? styles.active : ''} rspress-nav-screen`}
       ref={screen}
       id="navScreen"
     >