Revamp item nav (#21)

onlydustxyz · Aug 12, 2024 · db3dc81 · db3dc81
1 parent 928dd45
commit db3dc81
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}
       />