chore: polish the local nav

Author: SoonIter

packages/runtime/src/index.ts

@@ -1,5 +1,4 @@
 export { Head } from '@unhead/react';
-export { createPortal, flushSync } from 'react-dom';
 export * from 'react-router-dom';
 export { Content } from './Content';
 export { useActiveMatcher } from './hooks/useActiveMatcher';

packages/theme-default/src/components/SidebarMenu/index.scss

@@ -37,5 +37,9 @@
     z-index: var(--rp-z-index-mask);
     backdrop-filter: blur(3px);
     background-color: color-mix(in srgb, var(--rp-c-bg) 60%, transparent);
+    display: none;
+    @media (max-width: 767px) {
+      display: block;
+    }
   }
 }

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

@@ -1,6 +1,7 @@
 import { useLocaleSiteData, useLocation, useSite } from '@rspress/runtime';
 import MenuIcon from '@theme-assets/menu';
 import { forwardRef, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { useUISwitch } from '../../layout/Layout/useUISwitch';
 import { ReadPercent } from '../ReadPercent';
 import { SvgWrapper } from '../SvgWrapper';
@@ -112,9 +113,11 @@ export const SidebarMenu = forwardRef(
             </button>
           )}
         </div>
-        {(isSidebarOpen || isAsideOpen) && (
-          <div onClick={closeSidebar} className="rp-sidebar-menu__mask" />
-        )}
+        {(isSidebarOpen || isAsideOpen) &&
+          createPortal(
+            <div onClick={closeSidebar} className="rp-sidebar-menu__mask" />,
+            document.getElementById('__rspress_modal_container')!,
+          )}
       </>
     );
   },

packages/theme-default/src/layout/DocLayout/index.scss

@@ -1,10 +1,10 @@
 :root {
   // z-index
-  --rp-z-index-nav-screen: 80;
-  --rp-z-index-nav-menu: 30;
-  --rp-z-index-nav: 50;
-  --rp-z-index-mask: 70;
-  --rp-z-index-sidebar: 60;
+  --rp-z-index-nav-screen: 70;
+  --rp-z-index-nav: 60;
+  --rp-z-index-mask: 20;
+  --rp-z-index-sidebar: 50;
+  --rp-z-index-sidebar-menu: 30;
   --rp-z-index-aside: 40;
 }
 
@@ -90,20 +90,22 @@
 
     position: sticky;
     top: var(--rp-nav-height);
+    margin-top: var(--rp-sidebar-menu-height);
     right: 0;
     z-index: var(--rp-z-index-aside);
-
     padding-top: var(--rp-content-padding-y);
 
     overflow: hidden scroll;
     scrollbar-width: none;
     max-height: calc(100vh - var(--rp-nav-height));
+
+    box-shadow: var(--rp-shadow-1);
   }
   &__menu {
     position: sticky;
     top: var(--rp-nav-height);
     left: 0;
-    z-index: var(--rp-z-index-nav-menu);
+    z-index: var(--rp-z-index-sidebar-menu);
 
     height: var(--rp-sidebar-menu-height);
     &__placeholder {