first draft new sidebar

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

@@ -48,7 +48,7 @@ export const MenuItem = <T extends ElementType = "button">({
     >
       <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",
+          "group px-1 py-2 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
@@ -56,16 +56,16 @@ 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.25rem] rounded-md h-8 bg-primary`}/>
+            <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.2rem] rounded-md h-7 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 }}
+              style={{ width: 22, height: 22 }}
               // 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"
+              className="my-auto ml-[0.1rem] mr-3"
             />
             <span className="flex-grow text-left">{children}</span>
           </Item>