chore: upgrade Aside SidebarMenu

Author: SoonIter

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

@@ -4,6 +4,9 @@
   border-left: 1px solid var(--rp-c-divider-light);
   padding-left: 20px;
 
+  max-width: calc(100vh - var(--rp-nav-height) - var(--rp-sidebar-menu-height));
+  // padding-bottom: 100px;
+
   &__title {
     font-size: 14px;
     font-weight: 700;

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

@@ -2,9 +2,8 @@ import { useLocaleSiteData, useLocation, useSite } from '@rspress/runtime';
 import { Toc } from '@theme';
 import { useEffect } from 'react';
 import { scrollToTarget } from '../../logic/sideEffects';
-import { useDynamicToc } from '../Toc/useDynamicToc';
-import './index.scss';
 import { ReadPercent } from '../ReadPercent';
+import './index.scss';
 import { ScrollToTop } from './ScrollToTop';
 
 export function Aside() {
@@ -15,8 +14,6 @@ export function Aside() {
   const outlineTitle =
     localesData?.outlineTitle || themeConfig?.outlineTitle || 'ON THIS PAGE';
 
-  const headers = useDynamicToc();
-
   const { pathname } = useLocation();
 
   useEffect(() => {
@@ -33,10 +30,6 @@ export function Aside() {
     }
   }, [pathname]);
 
-  if (headers.length === 0) {
-    return <></>;
-  }
-
   return (
     <div className="rp-aside">
       <div className="rp-aside__title">

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

@@ -4,7 +4,6 @@
   flex-shrink: 0;
   border-bottom: 1px solid var(--rp-c-divider-light);
   background: var(--rp-c-bg);
-  transition: background 0.4s;
   color: var(--rp-c-text-1);
 
   --rp-nav-padding-x: 20px;

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

@@ -1,12 +1,10 @@
 import { useLocaleSiteData, useLocation, useSite } from '@rspress/runtime';
 import MenuIcon from '@theme-assets/menu';
-import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
 import { forwardRef, useEffect, useRef } from 'react';
 import { useUISwitch } from '../../layout/Layout/useUISwitch';
+import { ReadPercent } from '../ReadPercent';
 import { SvgWrapper } from '../SvgWrapper';
-import { useDynamicToc } from '../Toc/useDynamicToc';
 import './index.scss';
-import { ReadPercent } from '../ReadPercent';
 
 /* Top Menu, only displayed on <1280px screen width */
 export const SidebarMenu = forwardRef(
@@ -62,32 +60,6 @@ export const SidebarMenu = forwardRef(
       }
     }, [hash]);
 
-    useEffect(() => {
-      sidebarMenuRef.current &&
-        (isAsideOpen || isSidebarOpen) &&
-        disableBodyScroll(sidebarMenuRef.current, {
-          reserveScrollBarGap: true,
-        });
-      return () => {
-        clearAllBodyScrollLocks();
-      };
-    }, [isSidebarOpen, isAsideOpen]);
-
-    useEffect(() => {
-      sidebarMenuRef.current &&
-        isAsideOpen &&
-        disableBodyScroll(sidebarMenuRef.current, {
-          reserveScrollBarGap: true,
-        });
-      return () => {
-        clearAllBodyScrollLocks();
-      };
-    }, [isAsideOpen]);
-
-    const toc = useDynamicToc();
-
-    const hasToc = toc.length > 0;
-
     return (
       <>
         <div
@@ -111,7 +83,7 @@ export const SidebarMenu = forwardRef(
               <span>Menu</span>
             </button>
           )}
-          {uiSwitch?.showAside && hasToc && (
+          {uiSwitch?.showAside && (
             <button
               type="button"
               onClickCapture={e => {

packages/theme-default/src/components/SidebarMenu/useClickOutside.ts

@@ -19,9 +19,11 @@ function useClickOutside(
       handler(event);
       return;
     };
-    document.addEventListener('click', listener);
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
     return () => {
-      document.removeEventListener('click', listener);
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
     };
   }, [ref, handler]);
 }

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

@@ -1,4 +1,5 @@
-import { useRef, useState } from 'react';
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { SidebarMenu } from '.';
 import { useClickOutside } from './useClickOutside';
 
@@ -10,22 +11,37 @@ function useSidebarMenu() {
   const sidebarLayoutRef = useRef<HTMLDivElement>(null);
   const asideLayoutRef = useRef<HTMLDivElement>(null);
 
+  // only sidebar, body scroll lock can not work in iOS safari in aside
+  useEffect(() => {
+    sidebarMenuRef.current &&
+      isSidebarOpen &&
+      disableBodyScroll(sidebarMenuRef.current, {
+        reserveScrollBarGap: true,
+        allowTouchMove: () => true,
+      });
+    return () => {
+      clearAllBodyScrollLocks();
+    };
+  }, [isSidebarOpen]);
+
   useClickOutside([sidebarMenuRef, sidebarLayoutRef], () => {
     setIsSidebarOpen(false);
   });
   useClickOutside([sidebarMenuRef, asideLayoutRef], () => {
     setIsAsideOpen(false);
   });
 
-  const sidebarMenu = (
-    <SidebarMenu
-      isSidebarOpen={isSidebarOpen}
-      onIsSidebarOpenChange={setIsSidebarOpen}
-      isAsideOpen={isAsideOpen}
-      onIsAsideOpenChange={setIsAsideOpen}
-      ref={sidebarMenuRef}
-    />
-  );
+  const sidebarMenu = useMemo(() => {
+    return (
+      <SidebarMenu
+        isSidebarOpen={isSidebarOpen}
+        onIsSidebarOpenChange={setIsSidebarOpen}
+        isAsideOpen={isAsideOpen}
+        onIsAsideOpenChange={setIsAsideOpen}
+        ref={sidebarMenuRef}
+      />
+    );
+  }, [isAsideOpen, isSidebarOpen, setIsAsideOpen, setIsSidebarOpen]);
 
   return {
     sidebarMenu,

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

@@ -66,8 +66,7 @@
     padding: var(--rp-sidebar-padding);
     border-right: 1px solid var(--rp-c-divider-light);
 
-    overflow-x: auto;
-    overflow-y: scroll;
+    overflow: auto scroll;
 
     // postion
     position: sticky;
@@ -95,8 +94,7 @@
 
     padding-top: var(--rp-content-padding-y);
 
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden scroll;
     scrollbar-width: none;
     max-height: calc(100vh - var(--rp-nav-height));
   }
@@ -186,12 +184,20 @@
   }
   .rp-doc-layout {
     &__sidebar {
-      height: 100vh;
-      max-width: 100vh;
-
+      z-index: var(--rp-z-index-sidebar);
       position: fixed;
-      top: unset;
-      bottom: 0;
+      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)
+      );
+
+      padding: var(--rp-sidebar-padding) var(--rp-sidebar-padding)
+        calc(var(--rp-sidebar-padding) + 100px) var(--rp-sidebar-padding);
+
+      overflow: auto scroll;
 
       background: var(--rp-c-bg);
       opacity: 0;