misc: finalized KMIP icon

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
-import { DotLottie, DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
 import { twMerge } from "tailwind-merge";
 
 export type MenuProps = {
@@ -16,6 +16,7 @@ export type MenuItemProps<T extends ElementType> = {
   as?: T;
   children: ReactNode;
   icon?: string;
+  iconMode?: Mode;
   description?: ReactNode;
   isDisabled?: boolean;
   isSelected?: boolean;
@@ -26,6 +27,7 @@ export type MenuItemProps<T extends ElementType> = {
 export const MenuItem = <T extends ElementType = "button">({
   children,
   icon,
+  iconMode,
   className,
   isDisabled,
   isSelected,
@@ -62,6 +64,7 @@ export const MenuItem = <T extends ElementType = "button">({
             dotLottieRefCallback={(el) => {
               iconRef.current = el;
             }}
+            mode={iconMode}
             src={`/lotties/${icon}.json`}
             loop
             className="h-full w-full"

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -113,7 +113,7 @@ export const ProjectLayout = () => {
                           }}
                         >
                           {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="lock-closed">
+                            <MenuItem isSelected={isActive} icon="key-user" iconMode="reverse">
                               KMIP
                             </MenuItem>
                           )}