fix: rework sidebar menu responsive issues (#1928)

Author: JounQin

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

@@ -6,7 +6,6 @@ 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');
 }
 
@@ -36,7 +35,6 @@ 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/Nav/index.module.scss

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

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

@@ -28,7 +28,7 @@
 .navHamburger:hover .middle {
   top: 6px;
   left: 0;
-  transform: translateX(0);
+  transform: translate3d(0, 0, 0);
 }
 .navHamburger:hover .bottom {
   top: 12px;
@@ -38,15 +38,15 @@
 
 .navHamburger.active .top {
   top: 6px;
-  transform: translateX(0) rotate(225deg);
+  transform: translate3d(0, 0, 0) rotate(225deg);
 }
 .navHamburger.active .middle {
   top: 6px;
   transform: translateX(16px);
 }
 .navHamburger.active .bottom {
   top: 6px;
-  transform: translateX(0) rotate(135deg);
+  transform: translate3d(0, 0, 0) rotate(135deg);
 }
 
 .navHamburger.active:hover .top,
@@ -74,7 +74,7 @@
 .top {
   top: 0;
   left: 0;
-  transform: translateX(0);
+  transform: translate3d(0, 0, 0);
 }
 .middle {
   top: 6px;

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

@@ -130,8 +130,6 @@
 
 @media (max-width: 768px) {
   :global(.overview-index) {
-    padding: 42px 24px;
-
     h1 {
       font-size: 32px;
       margin-bottom: 24px;
@@ -159,7 +157,12 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
+  :global(.overview-index) {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .overview-groups {
     columns: 3;
   }

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

@@ -290,7 +290,7 @@ export function Overview(props: {
   const overviewTitle = title || 'Overview';
 
   return (
-    <div className="overview-index mx-auto px-8">
+    <div className="overview-index mx-auto">
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-10">
         <h1 className="text-3xl leading-10 tracking-tight">{overviewTitle}</h1>
         {/* Added search input */}

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

@@ -13,8 +13,9 @@
   z-index: var(--rp-z-index-sidebar);
   width: calc(100vw - 64px);
   max-width: 320px;
+  flex-shrink: 0;
   opacity: 0;
-  transform: translateX(-100%);
+  transform: translate3d(-100%, 0, 0);
   transition:
     opacity 0.5s,
     transform 0.25s ease;
@@ -30,7 +31,7 @@
 .sidebar.open {
   opacity: 1;
   visibility: visible;
-  transform: translateX(0);
+  transform: translate3d(0, 0, 0);
   transition:
     opacity 0.25s,
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
@@ -46,20 +47,14 @@
     margin-top: calc(var(--rp-nav-height) * -1);
     height: 100vh;
     width: var(--rp-sidebar-width);
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
     box-shadow: var(--rp-c-shadow-3);
     mask-image: linear-gradient(transparent, #000 20px),
       linear-gradient(270deg, #000 10px, transparent 0);
     --webkit-mask-image: linear-gradient(270deg, #000 10px, transparent 0);
   }
 }
 
-@media (min-width: 1440px) {
-  .sidebar {
-    width: var(--rp-sidebar-width);
-  }
-}
-
 .menuLink {
   opacity: 1;
 }

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

@@ -1,4 +1,4 @@
-// Only appear on mobile
+// Only appear on <1280px screen width
 .rspress-sidebar-menu {
   position: sticky;
   top: 0;
@@ -36,12 +36,18 @@
   z-index: var(--rp-z-index-backdrop);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1280px) {
   .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;
@@ -73,7 +79,7 @@
 
 .fly-in-enter-active {
   opacity: 1;
-  transform: translateX(0);
+  transform: translate3d(0, 0, 0);
   transition:
     opacity 300ms,
     transform 300ms;

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

@@ -1,41 +1,42 @@
 import { useLocation } from '@rspress/runtime';
-import { Sidebar, Toc } from '@theme';
+import { Toc } from '@theme';
 import ArrowRight from '@theme-assets/arrow-right';
 import MenuIcon from '@theme-assets/menu';
 import { 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 function SidebarMenu({
+  isSidebarOpen,
+  onIsSidebarOpenChange,
   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() {
-    setSidebarIsOpen(true);
+    onIsSidebarOpenChange(true);
   }
 
   function closeSidebar() {
-    setSidebarIsOpen(false);
+    onIsSidebarOpenChange(false);
   }
 
   useEffect(() => {
-    setSidebarIsOpen(false);
+    onIsSidebarOpenChange(false);
   }, [pathname]);
 
   useEffect(() => {
@@ -61,70 +62,57 @@ export function SidebarMenu({
   };
 
   return (
-    <>
-      {/* Top Menu, only displayed in mobile device */}
-      <div className="rspress-sidebar-menu">
-        {uiSwitch?.showSidebar ? (
+    <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>
-        ) : null}
-        {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>
-          </>
-        ) : null}
-      </div>
-      {/* Sidebar Component */}
-      {uiSwitch?.showSidebar ? (
-        <>
-          <Sidebar
-            isSidebarOpen={isSidebarOpen}
-            beforeSidebar={beforeSidebar}
-            afterSidebar={afterSidebar}
-            uiSwitch={uiSwitch}
-            navTitle={navTitle}
-          />
-          {isSidebarOpen ? (
+          {isSidebarOpen && (
             <div
               onClick={closeSidebar}
               className="rspress-sidebar-back-drop"
               style={{
                 background: 'rgba(0, 0, 0, 0.6)',
               }}
             />
-          ) : null}
+          )}
+        </>
+      )}
+      {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>
         </>
-      ) : null}
-    </>
+      )}
+    </div>
   );
 }