chore: update navscreen

SoonIter · SoonIter · commit a0aafa5dcdbb · 2025-09-30T17:36:15.000+08:00
diff --git a/packages/core/index.html b/packages/core/index.html
@@ -10,6 +10,6 @@
 
   <body>
     <div id="__rspress_root"><!--<?- DOC_CONTENT ?>--></div>
-    <div id="__rspress_search_container"></div>
+    <div id="__rspress_modal_container"></div>
   </body>
 </html>
diff --git a/packages/theme-default/src/assets/small-menu.svg b/packages/theme-default/src/assets/small-menu.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="8" cy="16" r="2" fill="currentColor"/><circle cx="16" cy="16" r="2" fill="currentColor"/><circle cx="24" cy="16" r="2" fill="currentColor"/></svg>
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.64453 5.22528H16.9779" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.64453 10.2253H16.9779" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.64453 15.2253H16.9779" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/theme-default/src/components/NavHamburger/index.tsx b/packages/theme-default/src/components/NavHamburger/index.tsx
@@ -1,4 +1,5 @@
 import SmallMenu from '@theme-assets/small-menu';
+import { createPortal } from 'react-dom';
 import { NavScreen } from '../NavScreen';
 import { SvgWrapper } from '../SvgWrapper';
 import * as styles from './index.module.scss';
@@ -8,15 +9,22 @@ export function NavHamburger() {
   const { isScreenOpen, toggleScreen } = useNavScreen();
   return (
     <>
-      <NavScreen isScreenOpen={isScreenOpen} toggleScreen={toggleScreen} />
+      {createPortal(
+        <NavScreen isScreenOpen={isScreenOpen} toggleScreen={toggleScreen} />,
+        document.getElementById('__rspress_modal_container')!,
+      )}
       <button
         onClick={toggleScreen}
         aria-label="mobile hamburger"
         className={`${isScreenOpen ? styles.active : ''} rspress-mobile-hamburger ${
           styles.navHamburger
         } rp-text-gray-500`}
       >
-        <SvgWrapper icon={SmallMenu} fill="currentColor" />
+        <SvgWrapper
+          icon={SmallMenu}
+          fill="currentColor"
+          className={`${isScreenOpen ? 'rp-bg-gray-200' : 'hover:rp-bg-gray-100'}`}
+        />
       </button>
     </>
   );
diff --git a/packages/theme-default/src/components/NavScreen/index.module.scss b/packages/theme-default/src/components/NavScreen/index.module.scss
@@ -10,7 +10,7 @@
   background-color: var(--rp-c-bg);
   overflow-y: auto;
   pointer-events: auto;
-  z-index: 20;
+  z-index: var(--rp-z-index-nav-screen);
 }
 .active {
   display: block;
diff --git a/packages/theme-default/src/components/Search/SearchPanel.tsx b/packages/theme-default/src/components/Search/SearchPanel.tsx
@@ -550,7 +550,7 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
               ) : null}
             </div>
           </div>,
-          document.getElementById('__rspress_search_container')!,
+          document.getElementById('__rspress_modal_container')!,
         )}
     </>
   );
diff --git a/packages/theme-default/src/layout/DocLayout/index.scss b/packages/theme-default/src/layout/DocLayout/index.scss
@@ -1,9 +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: 60;
-  --rp-z-index-sidebar: 70;
+  --rp-z-index-mask: 70;
+  --rp-z-index-sidebar: 60;
   --rp-z-index-aside: 40;
 }
 
@@ -70,7 +71,7 @@
 
     // postion
     position: sticky;
-    // margin-top: calc(-1 * var(--rp-sidebar-menu-height));
+    margin-top: calc(-1 * var(--rp-sidebar-menu-height));
     top: var(--rp-nav-height);
     left: 0;
     bottom: 0;
@@ -177,7 +178,7 @@
   }
 }
 
-@media (max-width: 960px) {
+@media (max-width: 768px) {
   :root {
     --rp-content-padding-x: 24px;
   }
@@ -186,12 +187,9 @@
       z-index: var(--rp-z-index-sidebar);
       position: fixed;
       top: var(--rp-nav-height);
-      right: 0;
 
-      // margin-top: var(--rp-sidebar-menu-height);
-      height: calc(
-        100vh - var(--rp-nav-height) - var(--rp-sidebar-menu-height)
-      );
+      margin-top: 0px;
+      height: calc(100vh - var(--rp-nav-height));
 
       padding: var(--rp-sidebar-padding) var(--rp-sidebar-padding)
         calc(var(--rp-sidebar-padding) + 100px) var(--rp-sidebar-padding);

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`background-color: var(--rp-c-bg);`
`11`	`11`	`overflow-y: auto;`
`12`	`12`	`pointer-events: auto;`
`13`		`- z-index: 20;`
	`13`	`+ z-index: var(--rp-z-index-nav-screen);`
`14`	`14`	`}`
`15`	`15`	`.active {`
`16`	`16`	`display: block;`