second iteration of the new sidebar

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -21,7 +21,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "min-w-[220px] bg-bunker will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -62,7 +62,7 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      "text-sm block font-inter px-4 py-2 data-[highlighted]:bg-gray-700 outline-none cursor-pointer",
+      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
       className
     )}
   >

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

@@ -56,7 +56,7 @@ export const MenuItem = <T extends ElementType = "button">({
       >
         <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.2rem] rounded-md h-7 bg-primary`}/>
+            <div className={`${isSelected ? "visisble" : "invisible"} -left-[0.28rem] absolute w-[0.07rem] rounded-md h-5 bg-primary`}/>
             {/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
             <Lottie
               lottieRef={iconRef}
@@ -76,6 +76,53 @@ export const MenuItem = <T extends ElementType = "button">({
   )
 };
 
+export const SubMenuItem = <T extends ElementType = "button">({
+  children,
+  icon,
+  className,
+  isDisabled,
+  isSelected,
+  as: Item = "button",
+  description,
+  // wrapping in forward ref with generic component causes the loss of ts definitions on props
+  inputRef,
+  ...props
+}: 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-1 mt-0.5 font-inter flex flex-col text-sm text-mineshaft-300 hover:text-mineshaft-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
+          isDisabled && "hover:bg-transparent cursor-not-allowed",
+          className
+        )}
+      >
+        <motion.span className="w-full flex flex-row items-center justify-start rounded-sm pl-6">
+          <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+            <Lottie
+              lottieRef={iconRef}
+              style={{ width: 16, height: 16 }}
+              // eslint-disable-next-line import/no-dynamic-require
+              animationData={require(`../../../../public/lotties/${icon}.json`)}
+              loop={false}
+              autoplay={false}
+              className="my-auto ml-[0.1rem] mr-3"
+            />
+            <span className="flex-grow text-left text-sm">{children}</span>
+          </Item>
+          {description && <span className="mt-2 text-xs">{description}</span>}
+        </motion.span>
+      </li>
+    </a>
+  )
+};
+
+
 MenuItem.displayName = "MenuItem";
 
 export type MenuGroupProps = {