Animated menu icons

frontend/src/components/v2/Menu/Menu.tsx

@@ -1,4 +1,8 @@
-import { ComponentPropsWithRef, ElementType, ReactNode, Ref } from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable global-require */
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from 'react';
+import { motion } from 'framer-motion'
+import Lottie from 'lottie-react'
 import { twMerge } from 'tailwind-merge';
 
 export type MenuProps = {
@@ -14,7 +18,7 @@ export type MenuItemProps<T extends ElementType> = {
   // Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
   as?: T;
   children: ReactNode;
-  icon?: ReactNode;
+  icon?: string;
   description?: ReactNode;
   isDisabled?: boolean;
   isSelected?: boolean;
@@ -33,23 +37,43 @@ export const MenuItem = <T extends ElementType = 'button'>({
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
   inputRef,
   ...props
-}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
-  <li
-    className={twMerge(
-      'px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-600 duration-50',
-      isSelected && 'bg-mineshaft-500',
-      isDisabled && 'hover:bg-transparent cursor-not-allowed',
-      className
-    )}
-  >
-    <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
-      <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
-      {icon && <span className="mr-3 ml-4 w-5">{icon}</span>}
-      <span className="flex-grow text-left">{children}</span>
-    </Item>
-    {description && <span className="mt-2 text-xs">{description}</span>}
-  </li>
-);
+}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
+  const iconRef = useRef()
+
+  return( 
+    <a 
+      onMouseEnter={() => iconRef.current?.play()}
+      onMouseLeave={() => iconRef.current?.stop()} 
+    >
+      <li
+        className={twMerge(
+          'group px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50',
+          isSelected && 'bg-mineshaft-600 hover:bg-mineshaft-600',
+          isDisabled && 'hover:bg-transparent cursor-not-allowed',
+          className
+        )}
+      >
+        <motion.span className="w-full flex flex-row items-center justify-start rounded-sm">
+          <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+            <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
+            {/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
+            <Lottie
+              lottieRef={iconRef}
+              style={{ width: 24, height: 24 }}
+              // eslint-disable-next-line import/no-dynamic-require
+              animationData={require(`../../../../public/lotties/${icon}.json`)}
+              loop={false}
+              autoplay={false}
+              className="my-auto ml-3 mr-3"
+            />
+            <span className="flex-grow text-left">{children}</span>
+          </Item>
+          {description && <span className="mt-2 text-xs">{description}</span>}
+        </motion.span>
+      </li>
+    </a>
+  )
+};
 
 MenuItem.displayName = 'MenuItem';