fix(v2): animate dropdown properly (#3603)

* fix(v2): animate dropdown properly

* Simplify logic

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

@@ -64,6 +64,16 @@ function DocSidebarItemCategory({
     return isActive ? false : item.collapsed;
   });
 
+  const menuListRef = useRef<HTMLUListElement>(null);
+  const [menuListHeight, setMenuListHeight] = useState<string | undefined>(
+    undefined,
+  );
+  const handleMenuListHeight = (calc = true) => {
+    setMenuListHeight(
+      calc ? `${menuListRef.current?.scrollHeight}px` : undefined,
+    );
+  };
+
   // If we navigate to a category, it should automatically expand itself
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
@@ -75,9 +85,14 @@ function DocSidebarItemCategory({
   const handleItemClick = useCallback(
     (e) => {
       e.preventDefault();
-      setCollapsed((state) => !state);
+
+      if (!menuListHeight) {
+        handleMenuListHeight();
+      }
+
+      setTimeout(() => setCollapsed((state) => !state), 100);
     },
-    [setCollapsed],
+    [menuListHeight],
   );
 
   if (items.length === 0) {
@@ -101,7 +116,17 @@ function DocSidebarItemCategory({
         {...props}>
         {label}
       </a>
-      <ul className="menu__list">
+      <ul
+        className="menu__list"
+        ref={menuListRef}
+        style={{
+          height: menuListHeight,
+        }}
+        onTransitionEnd={() => {
+          if (!collapsed) {
+            handleMenuListHeight(false);
+          }
+        }}>
         {items.map((childItem) => (
           <DocSidebarItem
             tabIndex={collapsed ? '-1' : '0'}

packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css

@@ -89,3 +89,15 @@
   line-height: 0.9;
   width: 24px;
 }
+
+/* TODO: Move to Infima */
+:global(.menu__list) :global(.menu__list) {
+  overflow-y: hidden;
+  will-change: height;
+  /* Same as "arrow" transition */
+  transition: height var(--ifm-transition-fast) linear;
+}
+
+:global(.menu__list-item--collapsed) :global(.menu__list) {
+  height: 0px !important;
+}

packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -156,6 +156,7 @@ function NavItemMobile({
   position: _position, // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }: DesktopOrMobileNavBarItemProps) {
+  const menuListRef = useRef<HTMLUListElement>(null);
   const {pathname} = useLocation();
   const [collapsed, setCollapsed] = useState(
     () => !items?.some((item) => isSamePath(item.to, pathname)) ?? true,
@@ -192,7 +193,14 @@ function NavItemMobile({
         }}>
         {props.label}
       </NavLink>
-      <ul className="menu__list">
+      <ul
+        className="menu__list"
+        ref={menuListRef}
+        style={{
+          height: !collapsed
+            ? `${menuListRef.current?.scrollHeight}px`
+            : undefined,
+        }}>
         {items.map(({className: childItemClassName, ...childItemProps}, i) => (
           <li className="menu__list-item" key={i}>
             <NavLink