Added dynamic icons to filters in tools page[Closes #1260]

components/Sidebar.tsx

@@ -355,7 +355,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
@@ -431,7 +438,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} />
@@ -498,7 +512,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
@@ -687,7 +708,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/Sidebar.tsx

@@ -1,5 +1,9 @@
 import React, { Dispatch, SetStateAction, useRef } from 'react';
-import FilterIcon from '~/public/icons/filter.svg';
+import LanguageIcon from '~/public/icons/language.svg';
+import ToolingIcon from '~/public/icons/tooling.svg';
+import EnvironmentIcon from '~/public/icons/environment.svg';
+import DialectIcon from '~/public/icons/dialect.svg';
+import LicenseIcon from '~/public/icons/license.svg';
 import DropdownMenu from './ui/DropdownMenu';
 import Checkbox from './ui/Checkbox';
 import SearchBar from './SearchBar';
@@ -8,6 +12,14 @@ import type { Transform } from '../hooks/useToolsTransform';
 import type { FilterCriteriaFields } from '../index.page';
 import { postAnalytics } from '../lib/postAnalytics';
 
+const filterIcons = {
+  languages: LanguageIcon,
+  toolingTypes: ToolingIcon,
+  environments: EnvironmentIcon,
+  drafts: DialectIcon,
+  licenses: LicenseIcon,
+};
+
 interface SidebarProps {
   filterCriteria: Record<FilterCriteriaFields, string[]>;
   transform: Transform;
@@ -79,8 +91,14 @@ export default function Sidebar({
         <SearchBar transform={transform} />
         {filters.map(({ label, accessorKey }) => {
           const checkedValues = transform[accessorKey as keyof Transform] || [];
+          const IconComponent =
+            filterIcons[accessorKey as keyof typeof filterIcons];
           return (
-            <DropdownMenu key={accessorKey} label={label} icon={<FilterIcon />}>
+            <DropdownMenu
+              key={accessorKey}
+              label={label}
+              icon={IconComponent && <IconComponent />}
+            >
               {filterCriteria[accessorKey as FilterCriteriaFields]
                 ?.map(String)
                 .map((filterOption) => (

pages/tools/components/ui/DropdownMenu.tsx

@@ -26,15 +26,15 @@ export default function DropdownMenu({
   }, [router]);
 
   return (
-    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded'>
+    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer'>
       <div
         className='w-full flex justify-between items-center align-middle'
         onClick={() => {
           setIsDropdownOpen((prev) => !prev);
         }}
       >
         {React.cloneElement(icon, {
-          className: 'mr-2',
+          className: 'mr-2 ml-2',
         })}
         <div className='text-slate-900 dark:text-slate-300 font-bold mr-auto'>
           {label}
@@ -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}