From 0b098e5c91d803681e1b12e45c593381cd13c83e Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 15:21:38 +0300
Subject: [PATCH 1/8] feat: add Button.Nav

---
 .../SettingsNavigationBtn.stories.ts          | 30 +++++++-------
 .../SettingsNavigationBtn.svelte              | 14 +++----
 .../ui/Button/Button.stories.snippet.svelte   | 13 +++++-
 .../src/lib/ui/Button/ButtonIcon.svelte       |  1 -
 .../src/lib/ui/Button/ButtonNav.stories.ts    | 27 +++++++++++++
 .../src/lib/ui/Button/ButtonNav.svelte        | 40 +++++++++++++++++++
 .../eid-wallet/src/lib/ui/Button/index.ts     |  3 +-
 7 files changed, 103 insertions(+), 25 deletions(-)
 create mode 100644 infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
 create mode 100644 infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
index 6e4c6b88..906a16e7 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
@@ -1,21 +1,23 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { SettingsIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
-	title: "Fragments/SettingsNavigationBtn",
-	component: SettingsNavigationBtn,
-	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
-		Component: SettingsNavigationBtn,
-		props: args,
-	}),
+    title: "Fragments/SettingsNavigationBtn",
+    component: SettingsNavigationBtn,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: SettingsNavigationBtn;
+        props: ComponentProps<typeof SettingsNavigationBtn>;
+    }) => ({
+        Component: SettingsNavigationBtn,
+        props: args,
+    }),
 };
 
 export const Primary = {
-	args: {
-		icon: icon,
-		label: "Language",
-		onClick: () => alert("asdf"),
-	},
+    args: {
+        icon: SettingsIcon,
+        label: "Language",
+    },
 };
diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
index 5d77c948..d4bfe4e2 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
@@ -1,23 +1,21 @@
 <script lang="ts">
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-	onClick: () => void;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
     <div class="flex items-center gap-2">
-        <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-            {@render icon?.()}
+        <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+            <HugeiconsIcon {icon} />
         </div>
         <h1>{label}</h1>
     </div>
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte
index e22e3596..0454a164 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte
@@ -1,7 +1,18 @@
 <script context="module">
-export { ButtonText };
+import { SettingsNavigationBtn } from "$lib/fragments";
+import { SettingsIcon } from "@hugeicons/core-free-icons";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
   Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+  Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+<SettingsNavigationBtn icon={SettingsIcon} label="Settings" />
+  {/snippet}
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
index d99183a7..0fd927da 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
new file mode 100644
index 00000000..8606f49f
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
@@ -0,0 +1,27 @@
+import type { ComponentProps } from "svelte";
+import ButtonNav from "./ButtonNav.svelte";
+import {
+    ButtonNavSettings,
+    ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+
+export default {
+    title: "UI/ButtonNav",
+    component: ButtonNav,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: ButtonNav;
+        props: ComponentProps<typeof ButtonNav>;
+    }) => ({
+        Component: ButtonNav,
+        props: args,
+    }),
+};
+
+export const Default = {
+    args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+    args: { href: "#", children: ButtonNavSettings },
+};
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte
new file mode 100644
index 00000000..598d3fda
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+    {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+    import * as Button from '$lib/ui/Button'
+    import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+    <SettingsNavigationBtn icon={SettingsIcon} label="Settings" />
+</Button.Nav>
+```
+ -->
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/index.ts b/infrastructure/eid-wallet/src/lib/ui/Button/index.ts
index be977c6c..f6adf300 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/index.ts
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/index.ts
@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

From 70b87a0e1aed5db3ca58364ad128ebfc00ded2e4 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 15:30:18 +0300
Subject: [PATCH 2/8] chore: format

---
 .../SettingsNavigationBtn.stories.ts          | 28 +++++++++----------
 .../src/lib/ui/Button/ButtonNav.stories.ts    | 28 +++++++++----------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
index 906a16e7..17a91183 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
@@ -3,21 +3,21 @@ import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
-    title: "Fragments/SettingsNavigationBtn",
-    component: SettingsNavigationBtn,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: SettingsNavigationBtn;
-        props: ComponentProps<typeof SettingsNavigationBtn>;
-    }) => ({
-        Component: SettingsNavigationBtn,
-        props: args,
-    }),
+	title: "Fragments/SettingsNavigationBtn",
+	component: SettingsNavigationBtn,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: SettingsNavigationBtn;
+		props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
+		Component: SettingsNavigationBtn,
+		props: args,
+	}),
 };
 
 export const Primary = {
-    args: {
-        icon: SettingsIcon,
-        label: "Language",
-    },
+	args: {
+		icon: SettingsIcon,
+		label: "Language",
+	},
 };
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
index 8606f49f..5df4d5de 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
@@ -1,27 +1,27 @@
 import type { ComponentProps } from "svelte";
 import ButtonNav from "./ButtonNav.svelte";
 import {
-    ButtonNavSettings,
-    ButtonNavText,
+	ButtonNavSettings,
+	ButtonNavText,
 } from "./Button.stories.snippet.svelte";
 
 export default {
-    title: "UI/ButtonNav",
-    component: ButtonNav,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: ButtonNav;
-        props: ComponentProps<typeof ButtonNav>;
-    }) => ({
-        Component: ButtonNav,
-        props: args,
-    }),
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: ButtonNav;
+		props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+		Component: ButtonNav,
+		props: args,
+	}),
 };
 
 export const Default = {
-    args: { href: "#", children: ButtonNavText },
+	args: { href: "#", children: ButtonNavText },
 };
 
 export const ForSettings = {
-    args: { href: "#", children: ButtonNavSettings },
+	args: { href: "#", children: ButtonNavSettings },
 };

From 557da5fe3a70b386f99083e69fc5369bf58dd9e9 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 15:33:19 +0300
Subject: [PATCH 3/8] chore: sort imports

---
 .../eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
index 5df4d5de..6b79958e 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
@@ -1,9 +1,9 @@
 import type { ComponentProps } from "svelte";
-import ButtonNav from "./ButtonNav.svelte";
 import {
 	ButtonNavSettings,
 	ButtonNavText,
 } from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
 
 export default {
 	title: "UI/ButtonNav",

From dbeee13cd6cb8a656dc467751b36528d6bfc18ee Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 15:38:37 +0300
Subject: [PATCH 4/8] update: remove unused snippet and add missing props

---
 .../SettingsNavigationBtn.stories.snippet.svelte       | 10 ----------
 .../SettingsNavigationBtn/SettingsNavigationBtn.svelte |  2 +-
 2 files changed, 1 insertion(+), 11 deletions(-)
 delete mode 100644 infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.snippet.svelte

diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.snippet.svelte b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.snippet.svelte
deleted file mode 100644
index 95907a7c..00000000
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.snippet.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script context="module">
-import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-
-export { icon };
-</script>
-
-{#snippet icon()}
-    <HugeiconsIcon size={30}  color="var(--color-black-500)" icon={LanguageSquareIcon} />
-{/snippet}
diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
index d4bfe4e2..3e45275c 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
@@ -15,7 +15,7 @@ const { icon, label, ...restProps }: ISettingsNavigationBtn = $props();
 <div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
     <div class="flex items-center gap-2">
         <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
-            <HugeiconsIcon {icon} />
+            <HugeiconsIcon {icon} size={30}  color="var(--color-black-500)" />
         </div>
         <h1>{label}</h1>
     </div>

From c8941989ec5023f4bb6a0bbb4bb4a1983594c600 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 17:03:56 +0300
Subject: [PATCH 5/8] feat: stick to fragment definition

---
 .../SettingsNavigationBtn.stories.ts                 |  5 +++--
 .../SettingsNavigationBtn.svelte                     |  8 +++++---
 infrastructure/eid-wallet/src/routes/+page.svelte    | 12 ++++--------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
index 17a91183..b5f5edb7 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts
@@ -1,4 +1,4 @@
-import { SettingsIcon } from "@hugeicons/core-free-icons";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
 import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
@@ -17,7 +17,8 @@ export default {
 
 export const Primary = {
 	args: {
-		icon: SettingsIcon,
+		icon: LanguageSquareIcon,
 		label: "Language",
+		href: "#",
 	},
 };
diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
index 3e45275c..de6050db 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
@@ -3,16 +3,18 @@ import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import * as Button from "$lib/ui/Button";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
 	icon: IconSvgElement;
 	label: string;
+	href: string;
 }
 
-const { icon, label, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
     <div class="flex items-center gap-2">
         <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
             <HugeiconsIcon {icon} size={30}  color="var(--color-black-500)" />
@@ -20,4 +22,4 @@ const { icon, label, ...restProps }: ISettingsNavigationBtn = $props();
         <h1>{label}</h1>
     </div>
     <HugeiconsIcon size={30}  color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
\ No newline at end of file
+</Button.Nav>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/+page.svelte b/infrastructure/eid-wallet/src/routes/+page.svelte
index c52ded3c..e3f8ae3b 100644
--- a/infrastructure/eid-wallet/src/routes/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/+page.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
+import SettingsNavigationBtn from "$lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte";
+import { SettingsIcon } from "@hugeicons/core-free-icons";
 </script>
 
-<div class="w-screen h-6 bg-red-100">red 100</div>
-<div class="w-screen h-6 bg-danger-100">danger 100</div>
-<div class="w-screen h-6 bg-red-200">red 200</div>
-<div class="w-screen h-6 bg-red-300">red 300</div>
-<div class="w-screen h-6 bg-danger-300">danger 300</div>
-<div class="w-screen h-6 bg-red-400">red 400</div>
-<div class="w-screen h-6 bg-red-500">red 500</div>
-<div class="w-screen h-6 bg-danger-500">danger 500</div>
+<SettingsNavigationBtn href={"/settings"} icon={SettingsIcon} label="Settings" />
+

From cc39206ba8644accb39380bfaea308af2723c4dc Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 17:08:57 +0300
Subject: [PATCH 6/8] update: documentation

---
 infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte
index 598d3fda..6d09ae92 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte
@@ -34,7 +34,7 @@ This component is a wrapper for a button that navigates to a different page.
 </script>
 
 <Button.Nav href="/settings">
-    <SettingsNavigationBtn icon={SettingsIcon} label="Settings" />
+    // The content of the button
 </Button.Nav>
 ```
  -->
\ No newline at end of file

From 8448ee9ca1c20a1438d421351ddbde497b6ef0ae Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 17:15:10 +0300
Subject: [PATCH 7/8] fix: stories

---
 .../lib/ui/Button/Button.stories.snippet.svelte    | 14 ++++++++++----
 .../src/lib/ui/Button/ButtonNav.stories.ts         |  6 +++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte
index 0454a164..b626e0f4 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte
@@ -1,6 +1,6 @@
 <script context="module">
-import { SettingsNavigationBtn } from "$lib/fragments";
-import { SettingsIcon } from "@hugeicons/core-free-icons";
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
 
 export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
@@ -14,5 +14,11 @@ export { ButtonText, ButtonNavText, ButtonNavSettings };
 {/snippet}
 
 {#snippet ButtonNavSettings()}
-<SettingsNavigationBtn icon={SettingsIcon} label="Settings" />
-  {/snippet}
\ No newline at end of file
+  <div class="flex items-center gap-2">
+    <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+        <HugeiconsIcon icon={SettingsIcon} size={30}  color="var(--color-black-500)" />
+    </div>
+    <h1>Settings</h1>
+  </div>
+  <HugeiconsIcon size={30}  color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
index 6b79958e..7c844501 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts
@@ -23,5 +23,9 @@ export const Default = {
 };
 
 export const ForSettings = {
-	args: { href: "#", children: ButtonNavSettings },
+	args: {
+		href: "#",
+		children: ButtonNavSettings,
+		class: "flex items-center justify-between px-3 py-2",
+	},
 };

From c793bd5dbff14d6118008e36ca2802293136db6a Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Thu, 27 Mar 2025 17:17:24 +0300
Subject: [PATCH 8/8] chore: sort imports

---
 .../SettingsNavigationBtn/SettingsNavigationBtn.svelte          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
index de6050db..ec128f5d 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import * as Button from "$lib/ui/Button";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
 	icon: IconSvgElement;