chore(theme/sidebar): use 1fr to toggleCollapse the sidebarGroup (#2723)

Author: SoonIter

packages/core/src/theme/components/NavScreen/NavScreenMenuItem.scss

@@ -46,24 +46,14 @@
 
   &__group {
     width: 100%;
+  }
 
-    height: 0px;
+  &__group-inner {
     overflow: hidden;
-    transition:
-      height 0.3s ease,
-      opacity 0.3s ease;
-
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
-
     margin-left: 8px;
-    opacity: 0;
-
-    &--open {
-      height: auto;
-      opacity: 1;
-    }
   }
 }

packages/core/src/theme/components/NavScreen/NavScreenMenuItem.tsx

@@ -114,14 +114,22 @@ export function NavScreenMenuItemWithChildren({
       />
 
       <div
-        className={`rp-nav-screen-menu-item__group ${isOpen ? 'rp-nav-screen-menu-item__group--open' : ''}`}
+        className="rp-nav-screen-menu-item__group"
+        style={{
+          display: 'grid',
+          gridTemplateRows: isOpen ? '1fr' : '0fr',
+          transition: 'grid-template-rows .2s ease-out',
+          width: '100%',
+        }}
       >
-        {menuItem.items.map(item => (
-          <NavScreenMenuItemWithChildren
-            key={item.text}
-            menuItem={item as any}
-          />
-        ))}
+        <div className="rp-nav-screen-menu-item__group-inner">
+          {menuItem.items.map(item => (
+            <NavScreenMenuItemWithChildren
+              key={item.text}
+              menuItem={item as any}
+            />
+          ))}
+        </div>
       </div>
     </>
   ) : (

packages/core/src/theme/components/Sidebar/SidebarGroup.scss

@@ -1,8 +1,3 @@
 .rp-sidebar-group {
   color: var(--rp-c-text-1);
-  font-weight: 400 !important;
-
-  &--top-level {
-    font-weight: 400 !important;
-  }
 }

packages/core/src/theme/components/Sidebar/SidebarGroup.tsx

@@ -8,7 +8,6 @@ import { useActiveMatcher } from '@rspress/core/runtime';
 import ArrowRight from '@theme-assets/arrow-right';
 import clsx from 'clsx';
 import type React from 'react';
-import { useCallback, useRef } from 'react';
 import { useNavigate } from '../Link/useNavigate';
 import { SvgWrapper } from '../SvgWrapper';
 import { SidebarDivider } from './SidebarDivider';
@@ -54,58 +53,10 @@ export function SidebarGroup(props: SidebarGroupProps) {
   const activeMatcher = useActiveMatcher();
   const { item, depth, id, setSidebarData, className } = props;
   const navigate = useNavigate();
-  const initialState = useRef('collapsed' in item && item.collapsed);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const containerHeightRef = useRef<number>(item.items.length * 40);
-
-  const transitionRef = useRef<number>(null);
   const active = item.link && activeMatcher(item.link);
   const { collapsed = false, collapsible = true } =
     item as NormalizedSidebarGroup;
 
-  const handleClickCollapsedTransition = useCallback(
-    (collapsed: boolean /*target value */) => {
-      if (transitionRef.current) {
-        clearTimeout(transitionRef.current);
-      }
-
-      const container = containerRef.current;
-
-      if (!container) {
-        return;
-      }
-
-      if (collapsed) {
-        // fold
-        const contentHeight = container.clientHeight;
-        containerHeightRef.current = contentHeight;
-
-        container.style.maxHeight = `${contentHeight}px`;
-        container.style.opacity = '0';
-        container.style.transition = 'all .2s ease-out';
-
-        transitionRef.current = window.setTimeout(() => {
-          if (containerRef.current) {
-            containerRef.current.style.maxHeight = '0px';
-          }
-        }, 200);
-      } else {
-        // unfold
-        const contentHeight = containerHeightRef.current;
-        container.style.transition = 'all .2s ease-in';
-        container.style.maxHeight = `${contentHeight}px`;
-        container.style.opacity = '1';
-
-        transitionRef.current = window.setTimeout(() => {
-          if (containerRef.current) {
-            containerRef.current.style.removeProperty('max-height');
-          }
-        }, 200);
-      }
-    },
-    [],
-  );
-
   const toggleCollapse = (): void => {
     // update collapsed state
     setSidebarData(sidebarData => {
@@ -132,13 +83,7 @@ export function SidebarGroup(props: SidebarGroupProps) {
         tag={item.tag}
         text={item.text}
         context={item.context}
-        className={clsx(
-          'rp-sidebar-group',
-          {
-            'rp-sidebar-group--top-level': depth === 0,
-          },
-          className,
-        )}
+        className={clsx('rp-sidebar-group', className)}
         depth={depth}
         onClick={e => {
           if (!active && item.link && !collapsed) {
@@ -149,55 +94,55 @@ export function SidebarGroup(props: SidebarGroupProps) {
             e.stopPropagation();
             navigate(item.link).then(() => {
               collapsible && toggleCollapse();
-              collapsible && handleClickCollapsedTransition(!collapsed);
             });
             return;
           }
           e.stopPropagation();
           collapsible && toggleCollapse();
-          collapsible && handleClickCollapsedTransition(!collapsed);
         }}
         right={collapsible && <CollapsibleIcon collapsed={collapsed} />}
       />
 
       <div
-        ref={containerRef}
         style={{
-          overflow: 'hidden',
-          maxHeight: initialState.current ? '0px' : undefined,
-          opacity: initialState.current ? 0 : 1,
+          // Expand/collapse by animating grid-template-rows from 0fr to 1fr.
+          display: 'grid',
+          gridTemplateRows: collapsed ? '0fr' : '1fr',
+          transition: 'grid-template-rows 0.2s ease-out',
         }}
       >
-        {item.items?.map((item, index) =>
-          isSidebarGroup(item) ? (
-            <SidebarGroup
-              id={`${id}-${index}`}
-              depth={depth + 1}
-              key={`${id}-${index}`}
-              item={item}
-              setSidebarData={setSidebarData}
-              className="rp-sidebar-item--group-item"
-            />
-          ) : isSidebarDivider(item) ? (
-            <SidebarDivider
-              key={index}
-              depth={depth + 1}
-              dividerType={item.dividerType}
-            />
-          ) : isSidebarSectionHeader(item) ? (
-            <SidebarSectionHeader
-              sectionHeaderText={item.sectionHeaderText}
-              key={index}
-            />
-          ) : (
-            <SidebarItemComp
-              key={index}
-              item={item}
-              depth={depth + 1}
-              className="rp-sidebar-item--group-item"
-            />
-          ),
-        )}
+        <div style={{ overflow: 'hidden' }}>
+          {item.items?.map((item, index) =>
+            isSidebarGroup(item) ? (
+              <SidebarGroup
+                id={`${id}-${index}`}
+                depth={depth + 1}
+                key={`${id}-${index}`}
+                item={item}
+                setSidebarData={setSidebarData}
+                className="rp-sidebar-item--group-item"
+              />
+            ) : isSidebarDivider(item) ? (
+              <SidebarDivider
+                key={index}
+                depth={depth + 1}
+                dividerType={item.dividerType}
+              />
+            ) : isSidebarSectionHeader(item) ? (
+              <SidebarSectionHeader
+                sectionHeaderText={item.sectionHeaderText}
+                key={index}
+              />
+            ) : (
+              <SidebarItemComp
+                key={index}
+                item={item}
+                depth={depth + 1}
+                className="rp-sidebar-item--group-item"
+              />
+            ),
+          )}
+        </div>
       </div>
     </>
   );