fix(theme): collapse doc sidebar category on label click if active (#10886)

Author: slorber

packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx

@@ -188,7 +188,14 @@ export default function DocSidebarItemCategory({
               ? (e) => {
                   onItemClick?.(item);
                   if (href) {
-                    updateCollapsed(false);
+                    if (isActive) {
+                      e.preventDefault();
+                      updateCollapsed();
+                    } else {
+                      // When navigating to a new category, we always expand
+                      // see https://github.com/facebook/docusaurus/issues/10854#issuecomment-2609616182
+                      updateCollapsed(false);
+                    }
                   } else {
                     e.preventDefault();
                     updateCollapsed();

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx

@@ -15,7 +15,6 @@ import React, {
   type SetStateAction,
   type ReactNode,
 } from 'react';
-import useIsBrowser from '@docusaurus/useIsBrowser';
 import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import {prefersReducedMotion} from '../../utils/accessibilityUtils';
 
@@ -157,24 +156,6 @@ type CollapsibleElementType = React.ElementType<
   Pick<React.HTMLAttributes<unknown>, 'className' | 'onTransitionEnd' | 'style'>
 >;
 
-/**
- * Prevent hydration layout shift before animations are handled imperatively
- * with JS
- */
-function getSSRStyle({
-  collapsed,
-  isBrowser,
-}: {
-  collapsed: boolean;
-  isBrowser: boolean;
-}) {
-  // After hydration, styles are applied
-  if (isBrowser) {
-    return undefined;
-  }
-  return collapsed ? CollapsedStyles : ExpandedStyles;
-}
-
 type CollapsibleBaseProps = {
   /** The actual DOM element to be used in the markup. */
   as?: CollapsibleElementType;
@@ -192,12 +173,6 @@ type CollapsibleBaseProps = {
   onCollapseTransitionEnd?: (collapsed: boolean) => void;
   /** Class name for the underlying DOM element. */
   className?: string;
-  /**
-   * This is mostly useful for details/summary component where ssrStyle is not
-   * needed (as details are hidden natively) and can mess up with the browser's
-   * native behavior when JS fails to load or is disabled
-   */
-  disableSSRStyle?: boolean;
 };
 
 function CollapsibleBase({
@@ -207,9 +182,7 @@ function CollapsibleBase({
   animation,
   onCollapseTransitionEnd,
   className,
-  disableSSRStyle,
 }: CollapsibleBaseProps) {
-  const isBrowser = useIsBrowser();
   const collapsibleRef = useRef<HTMLElement>(null);
 
   useCollapseAnimation({collapsibleRef, collapsed, animation});
@@ -219,8 +192,6 @@ function CollapsibleBase({
       // @ts-expect-error: the "too complicated type" is produced from
       // "CollapsibleElementType" being a huge union
       ref={collapsibleRef as RefObject<never>} // Refs are contravariant, which is not expressible in TS
-      // Not even sure we need this SSRStyle anymore, try to remove it?
-      style={disableSSRStyle ? undefined : getSSRStyle({collapsed, isBrowser})}
       onTransitionEnd={(e: React.TransitionEvent) => {
         if (e.propertyName !== 'height') {
           return;

packages/docusaurus-theme-common/src/components/Details/index.tsx

@@ -109,7 +109,6 @@ export function Details({
       <Collapsible
         lazy={false} // Content might matter for SEO in this case
         collapsed={collapsed}
-        disableSSRStyle // Allows component to work fine even with JS disabled!
         onCollapseTransitionEnd={(newCollapsed) => {
           setCollapsed(newCollapsed);
           setOpen(!newCollapsed);