chore: update

Author: SoonIter

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

@@ -5,7 +5,10 @@
   border-bottom: 1px solid var(--rp-c-divider-light);
   background: var(--rp-c-bg);
   color: var(--rp-c-text-1);
-  padding: 0 20px 0 20px;
+
+  --rp-nav-padding-x: 20px;
+  padding: 0 var(--rp-nav-padding-x) 0 var(--rp-nav-padding-x);
+
   justify-content: space-between;
   align-items: center;
 

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

@@ -1,10 +1,3 @@
-.rspress-sidebar-menu-container {
-  position: sticky;
-  top: var(--rp-nav-height);
-  left: 0;
-  z-index: var(--rp-z-index-local-nav);
-}
-
 // Only appear on <1280px screen width
 .rspress-sidebar-menu {
   display: flex;

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

@@ -76,53 +76,49 @@ export function SidebarMenu({
 
   return (
     <>
-      <div
-        className={`rspress-sidebar-menu-container ${hasToc ? '' : 'no-toc'}`}
-      >
-        <div className="rspress-sidebar-menu">
-          {uiSwitch?.showSidebar && (
-            <>
-              <button
-                type="button"
-                onClick={openSidebar}
-                className="rp-flex rp-items-center rp-justify-center rp-mr-auto"
-              >
-                <div className="rp-text-md rp-mr-2">
-                  <SvgWrapper icon={MenuIcon} />
-                </div>
-                <span className="rp-text-sm">Menu</span>
-              </button>
-            </>
-          )}
-          {uiSwitch?.showAside && hasToc && (
-            <>
-              <button
-                type="button"
-                onClick={() => setIsTocOpen(tocOpened => !tocOpened)}
-                className="rp-flex rp-items-center rp-justify-center rp-ml-auto"
-                ref={outlineButtonRef}
-              >
-                <span className="rp-text-sm">{outlineTitle}</span>
-                <div
-                  className="rp-text-md rp-mr-2"
-                  style={{
-                    transform: isTocOpen ? 'rotate(90deg)' : 'rotate(0deg)',
-                    transition: 'transform 0.2s ease-out',
-                    marginTop: '2px',
-                  }}
-                >
-                  <SvgWrapper icon={ArrowRight} />
-                </div>
-              </button>
-
+      <div className="rspress-sidebar-menu">
+        {uiSwitch?.showSidebar && (
+          <>
+            <button
+              type="button"
+              onClick={openSidebar}
+              className="rp-flex rp-items-center rp-justify-center rp-mr-auto"
+            >
+              <div className="rp-text-md rp-mr-2">
+                <SvgWrapper icon={MenuIcon} />
+              </div>
+              <span className="rp-text-sm">Menu</span>
+            </button>
+          </>
+        )}
+        {uiSwitch?.showAside && hasToc && (
+          <>
+            <button
+              type="button"
+              onClick={() => setIsTocOpen(tocOpened => !tocOpened)}
+              className="rp-flex rp-items-center rp-justify-center rp-ml-auto"
+              ref={outlineButtonRef}
+            >
+              <span className="rp-text-sm">{outlineTitle}</span>
               <div
-                className={`rspress-local-toc-container ${isTocOpen ? 'rspress-local-toc-container-show' : ''}`}
+                className="rp-text-md rp-mr-2"
+                style={{
+                  transform: isTocOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+                  transition: 'transform 0.2s ease-out',
+                  marginTop: '2px',
+                }}
               >
-                <Toc onItemClick={toggleTocItem} />
+                <SvgWrapper icon={ArrowRight} />
               </div>
-            </>
-          )}
-        </div>
+            </button>
+
+            <div
+              className={`rspress-local-toc-container ${isTocOpen ? 'rspress-local-toc-container-show' : ''}`}
+            >
+              <Toc onItemClick={toggleTocItem} />
+            </div>
+          </>
+        )}
       </div>
       {isSidebarOpen && (
         <div

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

@@ -83,6 +83,8 @@
 @media (min-width: 1280px) {
   .rp-doc-layout__doc {
     max-width: min(100%, 1000px);
+    overflow-x: auto; // CSS footgun: ensure right aside width is fixed
+    flex: 1; // CSS footgun: ensure right aside width is fixed
   }
   .rp-doc-layout__sidebar {
     --rp-sidebar-margin-left: calc(