Added transitions to dropdowns (#1265)

* added transitions to dropdowns * fomratting of code * Reverted changes in filtersvg file to match that of main
json-schema-org · Jan 18, 2025 · ae460d9 · ae460d9
1 parent ee7f95a
commit ae460d9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -360,7 +360,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getDocs })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getDocs,
+              'max-h-80 opacity-100': active.getDocs,
+            },
+          )}
           id='overview'
         >
           <DocLink
@@ -442,7 +449,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getStarted })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getStarted,
+              'max-h-80 opacity-100': active.getStarted,
+            },
+          )}
           id='getStarted'
         >
           <DocLink uri='/learn' label='Overview' setOpen={setOpen} />
@@ -515,7 +529,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getReference })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getReference,
+              'max-h-80 overflow-y-auto opacity-100': active.getReference,
+            },
+          )}
           id='reference'
         >
           <DocLink
@@ -710,7 +731,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getSpecification })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getSpecification,
+              'max-h-80 opacity-100': active.getSpecification,
+            },
+          )}
           id='specification'
         >
           <DocLink uri='/specification' label='Overview' setOpen={setOpen} />

diff --git a/pages/tools/components/ui/DropdownMenu.tsx b/pages/tools/components/ui/DropdownMenu.tsx
@@ -64,8 +64,11 @@ export default function DropdownMenu({
       <div
         className={classnames(
           'tools-dropdown-menu',
-          'ml-0 mt-4 overflow-x-hidden overscroll-y-auto max-h-80',
-          { hidden: !isDropdownOpen },
+          'ml-0 mt-0 overflow-hidden transition-all duration-500 ease-in-out',
+          {
+            'max-h-0 opacity-0 invisible': !isDropdownOpen,
+            'max-h-80 overflow-y-auto opacity-100 visible': isDropdownOpen,
+          },
         )}
       >
         {children}