Added transitions to dropdowns (#1265)

* added transitions to dropdowns

* fomratting of code

* Reverted changes in filtersvg file to match that of main

Author: bhat-shubham

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} />

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}