chore: SidebarMenu animation

Author: SoonIter

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

@@ -1,13 +1,11 @@
 import { useLocaleSiteData, useLocation, useSite } from '@rspress/runtime';
-import { useEffect } from 'react';
-
-import './index.scss';
 import { Toc } from '@theme';
+import { useEffect } from 'react';
 import { scrollToTarget } from '../../logic/sideEffects';
 import { useDynamicToc } from '../Toc/useDynamicToc';
-import { ProgressCircle } from './ProgressCircle';
+import './index.scss';
+import { ReadPercent } from '../ReadPercent';
 import { ScrollToTop } from './ScrollToTop';
-import { useReadPercent } from './useReadPercent';
 
 export function Aside() {
   const localesData = useLocaleSiteData();
@@ -18,7 +16,6 @@ export function Aside() {
     localesData?.outlineTitle || themeConfig?.outlineTitle || 'ON THIS PAGE';
 
   const headers = useDynamicToc();
-  const [readPercent] = useReadPercent();
 
   const { pathname } = useLocation();
 
@@ -44,7 +41,7 @@ export function Aside() {
     <div className="rp-aside">
       <div className="rp-aside__title">
         {outlineTitle}
-        <ProgressCircle percent={readPercent} size={14} strokeWidth={2} />
+        <ReadPercent size={14} strokeWidth={2} />
       </div>
       <nav className="rp-aside__toc">
         <Toc />

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

@@ -2,10 +2,16 @@
   display: inline-flex;
   align-items: center;
   height: 100%;
-  gap: 32px;
-
   list-style: none;
 
+  @media (min-width: 1280px) {
+    gap: 32px;
+  }
+
+  @media (max-width: 1279px) {
+    gap: 24px;
+  }
+
   &__others {
     display: flex;
     align-items: center;

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

@@ -67,5 +67,9 @@
     gap: 24px;
     display: flex;
     align-items: center;
+
+    @media (max-width: 767px) {
+      gap: 4px;
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type React from 'react';
-import './ProgressCircle.scss';
+import './index.scss';
 
 interface CircleProgressProps {
   percent: number;
@@ -28,7 +28,7 @@ export const ProgressCircle: React.FC<CircleProgressProps> = ({
     <svg
       width={size}
       height={size}
-      className={clsx('rp-aside__progress-circle', className)}
+      className={clsx('rp-progress-circle', className)}
     >
       <circle
         cx={size / 2}
@@ -49,7 +49,6 @@ export const ProgressCircle: React.FC<CircleProgressProps> = ({
         strokeWidth={strokeWidth}
         strokeDasharray={circumference}
         strokeDashoffset={offset}
-        // className="duration-75"
         transform={`rotate(-90 ${size / 2} ${size / 2})`}
         style={{ transition: 'stroke-dashoffset 0.3s' }}
       />

packages/theme-default/src/components/Aside/ProgressCircle.tsx renamed to packages/theme-default/src/components/ReadPercent/ProgressCircle.tsx

@@ -0,0 +1,3 @@
+.rp-progress-circle {
+  display: inline-flex;
+}

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

@@ -0,0 +1,19 @@
+import { ProgressCircle } from './ProgressCircle';
+import { useReadPercent } from './useReadPercent';
+
+export function ReadPercent({
+  size,
+  strokeWidth,
+}: {
+  size: number;
+  strokeWidth: number;
+}) {
+  const [readPercent] = useReadPercent();
+  return (
+    <ProgressCircle
+      percent={readPercent}
+      size={size}
+      strokeWidth={strokeWidth}
+    />
+  );
+}

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

@@ -1,12 +1,12 @@
 import { useLocaleSiteData, useLocation, useSite } from '@rspress/runtime';
-import ArrowRight from '@theme-assets/arrow-right';
 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 { 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(
@@ -66,7 +66,7 @@ export const SidebarMenu = forwardRef(
       sidebarMenuRef.current &&
         (isAsideOpen || isSidebarOpen) &&
         disableBodyScroll(sidebarMenuRef.current, {
-          reserveScrollBarGap: false,
+          reserveScrollBarGap: true,
         });
       return () => {
         clearAllBodyScrollLocks();
@@ -77,7 +77,7 @@ export const SidebarMenu = forwardRef(
       sidebarMenuRef.current &&
         isAsideOpen &&
         disableBodyScroll(sidebarMenuRef.current, {
-          reserveScrollBarGap: false,
+          reserveScrollBarGap: true,
         });
       return () => {
         clearAllBodyScrollLocks();
@@ -121,13 +121,15 @@ export const SidebarMenu = forwardRef(
               className="rp-sidebar-menu__right"
             >
               <span>{outlineTitle}</span>
-              <SvgWrapper
+              <ReadPercent size={14} strokeWidth={2} />
+              {/* TODO: discussion */}
+              {/* <SvgWrapper
                 icon={ArrowRight}
                 style={{
                   transform: isAsideOpen ? 'rotate(90deg)' : 'rotate(0deg)',
                   transition: 'transform 0.2s ease-out',
                 }}
-              />
+              /> */}
             </button>
           )}
         </div>

packages/theme-default/src/components/Aside/useReadPercent.ts renamed to packages/theme-default/src/components/ReadPercent/useReadPercent.ts

@@ -151,7 +151,6 @@
   }
   .rp-doc-layout {
     &__aside {
-      display: none;
       position: fixed;
       margin-top: var(--rp-sidebar-menu-height);
       background-color: color-mix(in srgb, var(--rp-c-bg) 60%, transparent);
@@ -162,8 +161,18 @@
       border-radius: var(--rp-radius-small);
       border: 1px solid var(--rp-c-divider-light);
 
+      visibility: hidden;
+      opacity: 0;
+      transform: translate3d(0, -10px, 0);
+      transition:
+        opacity 0.2s,
+        transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
+
       &--open {
         display: block;
+        opacity: 1;
+        visibility: visible;
+        transform: translate3d(0, 0, 0);
       }
     }
   }