From 07afca84620a03270ab3c547c561faf028c306a6 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Tue, 1 Apr 2025 07:56:38 +0300
Subject: [PATCH 1/2] feat: AppNav fragment

---
 .../lib/fragments/AppNav/AppNav.stories.ts    | 21 ++++++++++++++++
 .../src/lib/fragments/AppNav/AppNav.svelte    | 25 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts
 create mode 100644 infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte

diff --git a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts
new file mode 100644
index 00000000..60d4a38f
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts
@@ -0,0 +1,21 @@
+import type { ComponentProps } from "svelte";
+import AppNav from "./AppNav.svelte";
+
+export default {
+	title: "Fragments/AppNav",
+	component: AppNav,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: AppNav;
+		props: ComponentProps<typeof AppNav>;
+	}) => ({
+		Component: AppNav,
+		props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+		title: "Settings",
+	},
+};
diff --git a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
new file mode 100644
index 00000000..db8cffb9
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { ArrowLeft01Icon, Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	titleClasses?: string;
+}
+const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const baseClasses = "w-full relative flex justify-center h-14 items-center";
+</script>
+    
+<nav {...restProps} class={cn(baseClasses, restProps.class)}>
+    <Button.Icon 
+        icon={ArrowLeft01Icon}
+        iconSize="md"
+        iconColor={"black"}
+        class="absolute left-2"
+        onclick={() => window.history.back()}
+    />
+    <h4 class={cn(titleClasses)}>
+        {title}
+    </h4>
+</nav>
\ No newline at end of file

From 7acb142ac840cd3b5f10227df1f449440ffec8e9 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Tue, 1 Apr 2025 09:58:50 +0300
Subject: [PATCH 2/2] chore: add doc

---
 .../src/lib/fragments/AppNav/AppNav.svelte         | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
index db8cffb9..318bec58 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte
@@ -22,4 +22,16 @@ const baseClasses = "w-full relative flex justify-center h-14 items-center";
     <h4 class={cn(titleClasses)}>
         {title}
     </h4>
-</nav>
\ No newline at end of file
+</nav>
+
+<!-- 
+@component
+@name AppNav
+@description A component that displays the title of the current page and a back button.
+@props
+- title: string - The main title to display.
+- titleClasses: string - Additional classes to apply to the title element.
+@usage
+```svelte
+<AppNav title="My Title" />
+ -->
\ No newline at end of file