Revert "fix: display outline correctly on >=960px <=1280px screen wid…

…th (#1914)"

This reverts commit b21f5af.

e2e/tests/hide-nav-bar.test.ts

@@ -6,6 +6,7 @@ const fixtureDir = path.resolve(__dirname, '../fixtures');
 async function isNavBarVisible(page: Page): Promise<boolean> {
   const nav = await page.$('.rspress-nav');
   const className: string = await nav?.evaluate(el => el.className);
+
   return !className.includes('hidden');
 }
 
@@ -35,6 +36,7 @@ test.describe('basic test', async () => {
   test('hideNavBar: "auto" should work', async ({ page }) => {
     await launchApp('./rspress-hide-auto.config.ts');
     await page.goto(`http://localhost:${appPort}/`);
+
     await scrollDown(page);
     expect(await isNavBarVisible(page)).toBeFalsy();
   });

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

@@ -1,4 +1,4 @@
-// Only appear on <1280px screen width
+// Only appear on mobile
 .rspress-sidebar-menu {
   position: sticky;
   top: 0;
@@ -36,18 +36,12 @@
   z-index: var(--rp-z-index-backdrop);
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 960px) {
   .rspress-sidebar-menu {
     display: none;
   }
 }
 
-@media (min-width: 960px) and (max-width: 1280px) {
-  .rspress-sidebar-menu > button:first-child {
-    display: none;
-  }
-}
-
 .rspress-local-toc-container {
   position: absolute;
   padding: 6px;

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

@@ -1,41 +1,41 @@
 import { useLocation } from '@rspress/runtime';
-import { Toc } from '@theme';
+import { Sidebar, Toc } from '@theme';
 import ArrowRight from '@theme-assets/arrow-right';
 import MenuIcon from '@theme-assets/menu';
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import './index.scss';
 import type { UISwitchResult } from '../../logic/useUISwitch';
 import { SvgWrapper } from '../SvgWrapper';
-import './index.scss';
 
-/* Top Menu, only displayed on <1280px screen width */
-export const SidebarMenu = ({
-  isSidebarOpen,
-  onIsSidebarOpenChange,
+export function SideMenu({
   outlineTitle,
+  beforeSidebar,
+  afterSidebar,
   uiSwitch,
+  navTitle,
 }: {
-  isSidebarOpen: boolean;
-  onIsSidebarOpenChange: (isOpen: boolean) => void;
   outlineTitle: string;
+  beforeSidebar?: React.ReactNode;
+  afterSidebar?: React.ReactNode;
   uiSwitch?: UISwitchResult;
-}) => {
+  navTitle?: React.ReactNode;
+}) {
+  const [isSidebarOpen, setSidebarIsOpen] = useState<boolean>(false);
+  const [isTocOpen, setIsTocOpen] = useState<boolean>(false);
   const tocContainerRef = useRef<HTMLDivElement>(null);
   const outlineButtonRef = useRef<HTMLButtonElement>(null);
-
-  const [isTocOpen, setIsTocOpen] = useState<boolean>(false);
-
   const { pathname } = useLocation();
 
   function openSidebar() {
-    onIsSidebarOpenChange(true);
+    setSidebarIsOpen(true);
   }
 
   function closeSidebar() {
-    onIsSidebarOpenChange(false);
+    setSidebarIsOpen(false);
   }
 
   useEffect(() => {
-    onIsSidebarOpenChange(false);
+    setSidebarIsOpen(false);
   }, [pathname]);
 
   useEffect(() => {
@@ -61,57 +61,70 @@ export const SidebarMenu = ({
   };
 
   return (
-    <div className="rspress-sidebar-menu">
-      {uiSwitch?.showSidebar && (
-        <>
+    <Fragment>
+      {/* Top Menu, only displayed in mobile device */}
+      <div className="rspress-sidebar-menu">
+        {uiSwitch?.showSidebar ? (
           <button onClick={openSidebar} className="flex-center mr-auto">
             <div className="text-md mr-2">
               <SvgWrapper icon={MenuIcon} />
             </div>
             <span className="text-sm">Menu</span>
           </button>
-          {isSidebarOpen && (
+        ) : null}
+        {uiSwitch?.showAside ? (
+          <Fragment>
+            <button
+              onClick={() => setIsTocOpen(tocOpened => !tocOpened)}
+              className="flex-center ml-auto"
+              ref={outlineButtonRef}
+            >
+              <span className="text-sm">{outlineTitle}</span>
+              <div
+                className="text-md 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-local-toc-container ${isTocOpen ? 'rspress-local-toc-container-show' : ''}`}
+            >
+              <Toc
+                onItemClick={() => {
+                  setIsTocOpen(false);
+                }}
+              />
+            </div>
+          </Fragment>
+        ) : null}
+      </div>
+      {/* Sidebar Component */}
+      {uiSwitch?.showSidebar ? (
+        <Fragment>
+          <Sidebar
+            isSidebarOpen={isSidebarOpen}
+            beforeSidebar={beforeSidebar}
+            afterSidebar={afterSidebar}
+            uiSwitch={uiSwitch}
+            navTitle={navTitle}
+          />
+          {isSidebarOpen ? (
             <div
               onClick={closeSidebar}
               className="rspress-sidebar-back-drop"
               style={{
                 background: 'rgba(0, 0, 0, 0.6)',
               }}
             />
-          )}
-        </>
-      )}
-      {uiSwitch?.showAside && (
-        <>
-          <button
-            onClick={() => setIsTocOpen(tocOpened => !tocOpened)}
-            className="flex-center ml-auto"
-            ref={outlineButtonRef}
-          >
-            <span className="text-sm">{outlineTitle}</span>
-            <div
-              className="text-md 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-local-toc-container ${isTocOpen ? 'rspress-local-toc-container-show' : ''}`}
-          >
-            <Toc
-              onItemClick={() => {
-                setIsTocOpen(false);
-              }}
-            />
-          </div>
-        </>
-      )}
-    </div>
+          ) : null}
+        </Fragment>
+      ) : null}
+    </Fragment>
   );
-};
+}

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

@@ -58,7 +58,7 @@
 }
 
 @media (max-width: 768px) {
-  html:root {
+  :root {
     --rp-nav-height: 56px;
   }
   .menu-item:before {

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

@@ -1,5 +1,6 @@
 import type { DefaultThemeConfig, SiteData } from '@rspress/shared';
 import SmallMenu from '@theme-assets/small-menu';
+import { Fragment } from 'react';
 import { useNavScreen } from '../../logic/useNav';
 import { NavScreen } from '../NavScreen';
 import { SvgWrapper } from '../SvgWrapper';
@@ -14,7 +15,7 @@ export function NavHamburger(props: Props) {
   const { siteData, pathname } = props;
   const { isScreenOpen, toggleScreen } = useNavScreen();
   return (
-    <>
+    <Fragment>
       <NavScreen
         isScreenOpen={isScreenOpen}
         toggleScreen={toggleScreen}
@@ -30,6 +31,6 @@ export function NavHamburger(props: Props) {
       >
         <SvgWrapper icon={SmallMenu} fill="currentColor" />
       </button>
-    </>
+    </Fragment>
   );
 }

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

@@ -13,9 +13,8 @@
   z-index: var(--rp-z-index-sidebar);
   width: calc(100vw - 64px);
   max-width: 320px;
-  flex-shrink: 0;
   opacity: 0;
-  transform: translate3d(-100%, 0, 0);
+  transform: translateX(-100%);
   transition:
     opacity 0.5s,
     transform 0.25s ease;
@@ -55,6 +54,12 @@
   }
 }
 
+@media (min-width: 1440px) {
+  .sidebar {
+    width: var(--rp-sidebar-width);
+  }
+}
+
 .menuLink {
   opacity: 1;
 }

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

@@ -57,6 +57,9 @@
 }
 
 @media (max-width: 960px) {
+  .docLayout {
+    position: relative;
+  }
   .content {
     padding: 36px 24px 72px 24px;
   }
@@ -68,6 +71,7 @@
 
 @media (min-width: 960px) {
   .docLayout {
+    width: 100%;
     display: flex;
   }