add doc sidebar transition

solana-foundation · Aug 13, 2024 · 6db9d73 · 6db9d73
1 parent 60cc6eb
commit 6db9d73
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git a/src/components/developers/DevelopersContentPage/DevelopersContentPage.module.scss b/src/components/developers/DevelopersContentPage/DevelopersContentPage.module.scss
@@ -353,6 +353,7 @@
       max-height: calc(100vh - 8rem);
       overflow-y: auto;
       overflow-x: hidden;
+      scrollbar-gutter: stable;
       @include custom-scrollbar;
     }
 
@@ -457,12 +458,6 @@
       gap: 0.5rem;
       padding: 0.5rem 0.8rem 0.5rem 0rem;
 
-      &__active {
-        padding-left: 0.5rem;
-        margin-left: 1px;
-        border-left: 3px solid var(--mdx-link-color) !important;
-      }
-
       &__heading {
         font-size: 20px;
         font-weight: bold;
@@ -487,6 +482,7 @@
 
     li,
     &__list {
+      position: relative;
       list-style-type: none;
       margin: 0;
 
@@ -539,17 +535,11 @@
       &__active-section {
         color: var(--body-text) !important;
         font-weight: 600;
-        margin-left: -2px;
-        border-left: 3px solid var(--mdx-link-color) !important;
-        // text-decoration: underline;
       }
 
       &__active-link {
         color: var(--body-text) !important;
-        margin-left: -2px;
-        border-left: 3px solid var(--mdx-link-color) !important;
         font-weight: 600;
-        // text-decoration: underline;
       }
     }
   }

diff --git a/src/components/developers/DocsNavSidebar.tsx b/src/components/developers/DocsNavSidebar.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import ContentApi from "@/utils/contentApi";
 import classNames from "classnames";
 import Link from "next/link";
@@ -157,28 +157,45 @@ const SidebarMenu = memo(
     currentPath,
     nestedCount = 1,
     isOpen = true,
-    isInFolder = false,
   }: SidebarMenuProps) => {
-    // do nothing if there are no child items
-    if (!navItems?.length) return <></>;
+    const [height, setHeight] = useState<string | number>("auto");
+    const contentRef = useRef<HTMLUListElement>(null);
+
+    const updateHeight = useCallback(() => {
+      if (contentRef.current) {
+        setHeight(isOpen ? contentRef.current.scrollHeight : 0);
+      }
+    }, [isOpen]);
+
+    useEffect(() => {
+      updateHeight();
+      window.addEventListener("resize", updateHeight);
+      return () => window.removeEventListener("resize", updateHeight);
+    }, [updateHeight]);
+
+    if (!navItems?.length) return null;
 
     return (
-      <ul
+      <div
         style={{
-          display: !isOpen ? "none" : undefined,
-          borderColor: isInFolder ? "var(--mdx-details-border)" : undefined,
+          maxHeight: height,
+          opacity: isOpen ? 1 : 0,
+          overflow: "hidden",
+          transition: "max-height 300ms ease-in-out, opacity 300ms ease-in-out",
         }}
       >
-        {navItems.map((section, key) => (
-          <SidebarMenuChildren
-            isExpandedDefault={isExpandedDefault}
-            key={key}
-            section={section}
-            currentPath={currentPath}
-            nestedCount={nestedCount}
-          />
-        ))}
-      </ul>
+        <ul ref={contentRef}>
+          {navItems.map((section, key) => (
+            <SidebarMenuChildren
+              isExpandedDefault={isExpandedDefault}
+              key={key}
+              section={section}
+              currentPath={currentPath}
+              nestedCount={nestedCount}
+            />
+          ))}
+        </ul>
+      </div>
     );
   },
 );
@@ -213,6 +230,7 @@ const SidebarMenuChildren = memo(
           e.target?.tagName.toLowerCase(),
         );
         if (clickedToggleIcon) e.preventDefault();
+
         setIsOpen(!isOpen);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps