From db3dc810dc6985c364454a8470560d810254636f Mon Sep 17 00:00:00 2001
From: Mehdi Hamri <143011364+pixelfact@users.noreply.github.com>
Date: Mon, 12 Aug 2024 12:06:10 +0200
Subject: [PATCH] Revamp item nav (#21)

---
 .../adapters/default/default.adapter.tsx         | 16 ++++++++--------
 .../molecules/item-nav/item-nav.stories.tsx      |  4 +++-
 .../molecules/item-nav/item-nav.types.ts         |  3 ++-
 .../menu/primary-menu/primary-menu.tsx           |  8 ++++----
 .../menu/secondary-menu/secondary-menu.tsx       |  4 ++--
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
index 923212565..00c0f94e2 100644
--- a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
+++ b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
@@ -48,22 +48,22 @@ function Content({
 }
 
 export function ItemNavDefaultAdapter({ isFolded, ...props }: ItemNavPort) {
-  const { isDisabled, classNames, onClick, ...linkProps } = props;
+  const { isDisabled, classNames, onClick, linkProps } = props;
   const slots = ItemNavDefaultVariants({
     isDisabled,
   });
 
-  if (onClick) {
+  if (linkProps) {
     return (
-      <button className={cn(slots.base(), classNames?.base)} onClick={onClick} disabled={isDisabled}>
-        <Content {...props} isExternal={false} isFolded={isFolded} />
-      </button>
+      <BaseLink {...linkProps} className={cn(slots.base(), classNames?.base)}>
+        {({ isExternal }) => <Content {...props} isFolded={isFolded} isExternal={isExternal} />}
+      </BaseLink>
     );
   }
 
   return (
-    <BaseLink className={cn(slots.base(), classNames?.base)} {...linkProps}>
-      {({ isExternal }) => <Content {...props} isFolded={isFolded} isExternal={isExternal} />}
-    </BaseLink>
+    <button className={cn(slots.base(), classNames?.base)} onClick={onClick} disabled={isDisabled}>
+      <Content {...props} isExternal={false} isFolded={isFolded} />
+    </button>
   );
 }
diff --git a/design-system/molecules/item-nav/item-nav.stories.tsx b/design-system/molecules/item-nav/item-nav.stories.tsx
index ff318f77d..711185b63 100644
--- a/design-system/molecules/item-nav/item-nav.stories.tsx
+++ b/design-system/molecules/item-nav/item-nav.stories.tsx
@@ -6,7 +6,9 @@ import { ItemNav } from "./variants/item-nav-default";
 type Story = StoryObj<typeof ItemNav>;
 
 const defaultProps: ItemNavPort = {
-  href: "https://www.google.com",
+  linkProps: {
+    href: "https://www.google.com",
+  },
   icon: {
     name: "ri-home-4-line",
   },
diff --git a/design-system/molecules/item-nav/item-nav.types.ts b/design-system/molecules/item-nav/item-nav.types.ts
index 0e4c379aa..853ad8b60 100644
--- a/design-system/molecules/item-nav/item-nav.types.ts
+++ b/design-system/molecules/item-nav/item-nav.types.ts
@@ -13,7 +13,8 @@ interface ClassNames {
   label: string;
 }
 
-export interface ItemNavPort extends _BaseLinkProps, PropsWithChildren {
+export interface ItemNavPort extends PropsWithChildren {
+  linkProps?: _BaseLinkProps;
   classNames?: Partial<ClassNames>;
   labelProps?: Partial<TypoPort<"span">>;
   icon: IconPort;
diff --git a/shared/features/navigation/menu/primary-menu/primary-menu.tsx b/shared/features/navigation/menu/primary-menu/primary-menu.tsx
index cce6d8014..0acb9d7a5 100644
--- a/shared/features/navigation/menu/primary-menu/primary-menu.tsx
+++ b/shared/features/navigation/menu/primary-menu/primary-menu.tsx
@@ -8,27 +8,27 @@ export function PrimaryMenu({ isFolded }: PrimaryMenuProps) {
       <ItemNav
         isFolded={isFolded}
         icon={{ name: "ri-line-chart-line" }}
-        href={"/test"}
+        linkProps={{ href: "/test" }}
         translate={{ token: "primaryNavigation:primaryMenu.data" }}
       />
       <ItemNav
         isFolded={isFolded}
         icon={{ name: "ri-wallet-3-line" }}
-        href={"/test2"}
+        linkProps={{ href: "/test" }}
         translate={{ token: "primaryNavigation:primaryMenu.financial" }}
         isDisabled={true}
       />
       <ItemNav
         isFolded={isFolded}
         icon={{ name: "ri-clipboard-line" }}
-        href={"/test2"}
+        linkProps={{ href: "/test" }}
         translate={{ token: "primaryNavigation:primaryMenu.program" }}
         isDisabled={true}
       />
       <ItemNav
         isFolded={isFolded}
         icon={{ name: "ri-compass-3-line" }}
-        href={process.env.NEXT_PUBLIC_MARKETPLACE_URL ?? ""}
+        linkProps={{ href: process.env.NEXT_PUBLIC_MARKETPLACE_URL ?? "" }}
         translate={{ token: "primaryNavigation:primaryMenu.projects" }}
       />
     </>
diff --git a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
index daf53c68a..dd93f0b63 100644
--- a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
+++ b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
@@ -13,14 +13,14 @@ export function SecondaryMenu({ isFolded }: SecondaryMenuProps) {
       <ItemNav
         isFolded={isFolded}
         icon={{ name: "ri-chat-4-line" }}
-        href={"/test"}
+        linkProps={{ href: "/test" }}
         translate={{ token: "primaryNavigation:secondaryMenu.support" }}
         onClick={() => setIsOpen(true)}
       />
       <ItemNav
         isFolded={isFolded}
         icon={{ name: "ri-settings-line" }}
-        href={"/test"}
+        linkProps={{ href: "/test" }}
         translate={{ token: "primaryNavigation:secondaryMenu.settings" }}
         isDisabled={true}
       />