chore: upgrade Aside SidebarMenu

Author: SoonIter

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

@@ -16,6 +16,9 @@
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    @media (max-width: 1280px) {
+      display: none;
+    }
   }
 
   &__divider {

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

@@ -2,12 +2,11 @@ import { useLocaleSiteData, useLocation, useSite } from '@rspress/runtime';
 import { useEffect } from 'react';
 
 import './index.scss';
+import { Toc } from '@theme';
 import { scrollToTarget } from '../../logic/sideEffects';
+import { useDynamicToc } from '../Toc/useDynamicToc';
 import { ProgressCircle } from './ProgressCircle';
 import { ScrollToTop } from './ScrollToTop';
-import { TocItem } from './TocItem';
-import { useActiveAnchor } from './useActiveAnchor';
-import { useDynamicToc } from './useDynamicToc';
 import { useReadPercent } from './useReadPercent';
 
 export function Aside() {
@@ -21,13 +20,8 @@ export function Aside() {
   const headers = useDynamicToc();
   const [readPercent] = useReadPercent();
 
-  // For outline text highlight
-  const baseHeaderLevel = 2;
-
   const { pathname } = useLocation();
 
-  const activeAnchorId = useActiveAnchor(headers, readPercent === 100);
-
   useEffect(() => {
     const decodedHash = decodeURIComponent(window.location.hash);
     console.log('decodedHash', decodedHash);
@@ -53,14 +47,7 @@ export function Aside() {
         <ProgressCircle percent={readPercent} size={14} strokeWidth={2} />
       </div>
       <nav className="rp-aside__toc">
-        {headers.map((header, index) => (
-          <TocItem
-            key={`${header.depth}_${header.text}_${header.id}_${index}`}
-            baseHeaderLevel={baseHeaderLevel}
-            header={header}
-            active={activeAnchorId === header.id}
-          />
-        ))}
+        <Toc />
       </nav>
       <div className="rp-aside__divider" />
       <div className="rp-aside__bottom">

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

@@ -4,6 +4,7 @@ import type React from 'react';
 import type { ComponentProps } from 'react';
 import { getHref, useNavigate } from './useNavigate';
 import './index.scss';
+import clsx from 'clsx';
 
 export interface LinkProps extends ComponentProps<'a'> {
   href?: string;
@@ -37,7 +38,7 @@ export function Link(props: LinkProps) {
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        className={`rp-link ${className}`}
+        className={clsx(className, 'rp-link')}
       >
         {children}
       </a>
@@ -46,7 +47,7 @@ export function Link(props: LinkProps) {
 
   if (linkType === 'hashOnly') {
     return (
-      <a {...props} href={href} className={`rp-link ${className}`}>
+      <a {...props} href={href} className={clsx(className, 'rp-link')}>
         {children}
       </a>
     );
@@ -57,7 +58,7 @@ export function Link(props: LinkProps) {
       <a
         {...props}
         href={href}
-        className={`rp-link ${className}`}
+        className={`${className} rp-link`}
         onMouseEnter={event => {
           onMouseEnter?.(event);
           preloadLink(removeBaseHref);
@@ -90,7 +91,7 @@ export function Link(props: LinkProps) {
     <a
       {...props}
       href={withBaseHref}
-      className={`rp-link ${className}`}
+      className={clsx(className, 'rp-link')}
       onMouseEnter={event => {
         onMouseEnter?.(event);
         preloadLink(removeBaseHref);

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

@@ -1,13 +1,11 @@
 import { useSidebarDynamic } from '@rspress/runtime';
-import {
-  type SidebarDivider as ISidebarDivider,
-  type SidebarItem as ISidebarItem,
-  type SidebarSectionHeader as ISidebarSectionHeader,
-  inBrowser,
-  type NormalizedSidebarGroup,
-  type SidebarData,
+import type {
+  SidebarDivider as ISidebarDivider,
+  SidebarItem as ISidebarItem,
+  SidebarSectionHeader as ISidebarSectionHeader,
+  NormalizedSidebarGroup,
+  SidebarData,
 } from '@rspress/shared';
-import { useEffect } from 'react';
 import { SidebarDivider } from './SidebarDivider';
 import { SidebarGroup } from './SidebarGroup';
 import { SidebarItem } from './SidebarItem';
@@ -18,33 +16,9 @@ import {
   isSidebarSectionHeader,
 } from './utils';
 
-interface Props {
-  isSidebarOpen?: boolean;
-}
-
-export let bodyStyleOverflow: string;
-
-export function Sidebar(props: Props) {
-  const { isSidebarOpen } = props;
-
+export function Sidebar() {
   const [sidebarData, setSidebarData] = useSidebarDynamic();
 
-  useEffect(() => {
-    if (inBrowser()) {
-      if (isSidebarOpen) {
-        bodyStyleOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow = bodyStyleOverflow || '';
-      }
-    }
-    return () => {
-      if (inBrowser()) {
-        document.body.style.overflow = bodyStyleOverflow || '';
-      }
-    };
-  }, [isSidebarOpen]);
-
   return (
     <SidebarList sidebarData={sidebarData} setSidebarData={setSidebarData} />
   );

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

@@ -1,97 +1,41 @@
-// Only appear on <1280px screen width
-.rspress-sidebar-menu {
+.rp-sidebar-menu {
+  width: 100%;
+  height: 100%;
   display: flex;
+
+  padding: 0px 20px;
+
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--rp-c-divider-light);
-  // border-top: 1px solid var(--rp-c-divider-light);
-  width: 100%;
-  color: var(--rp-c-text-1);
   background-color: var(--rp-c-bg);
-  padding-left: 10px;
-  > button {
-    background-color: transparent;
-    padding: 12px;
-    transition: color 0.5s;
-    &:hover {
-      color: var(--rp-c-text-3);
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
-
-.rspress-sidebar-back-drop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--rp-z-index-backdrop);
-}
-
-@media (min-width: 1280px) {
-  .rspress-sidebar-menu {
-    display: none;
-  }
-}
+  border-bottom: 1px solid var(--rp-c-divider-light);
 
-@media (min-width: 960px) and (max-width: 1280px) {
-  .rspress-sidebar-menu > button:first-child {
-    display: none;
+  // text
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+
+  &__left,
+  &__right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    height: 100%;
+    background: transparent;
   }
 
-  .rspress-sidebar-menu-container.no-toc {
+  @media (min-width: 1280px) {
     display: none;
   }
 
-  html:root:has(.rspress-sidebar-menu-container.no-toc) {
-    --rp-sidebar-menu-height: 0px;
-  }
-}
-
-.rspress-local-toc-container {
-  position: absolute;
-  padding: 6px;
-  margin-left: var(--rp-sidebar-width);
-  border-radius: var(--rp-radius-small);
-  top: calc(var(--rp-nav-height) - 14px);
-  background-color: var(--rp-c-bg-soft);
-  left: 20px;
-  right: 20px;
-  max-height: calc(100vh - var(--rp-nav-height) - 20px);
-  overflow: scroll;
-  box-shadow: var(--rp-shadow-1);
-  border: 1px solid var(--rp-c-divider-light);
-  opacity: 0;
-  transform: translateY(-20px);
-  visibility: hidden;
-  transition: all 0.3s ease-out;
-
-  &-show {
-    opacity: 1;
-    transform: translateY(0);
-    visibility: visible;
+  &__mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--rp-z-index-mask);
+    backdrop-filter: blur(3px);
+    background-color: color-mix(in srgb, var(--rp-c-bg) 60%, transparent);
   }
 }
-
-.fly-in-enter {
-  opacity: 0;
-  transform: translateY(-16px);
-}
-
-.fly-in-enter-active {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-  transition:
-    opacity 300ms,
-    transform 300ms;
-}
-
-.fly-in-exit,
-.fly-in-exit-active {
-  opacity: 0;
-  transition: none;
-}