[PATCH v1 06/17] fix(breadcrumb): Move settingsNav to settings items navigations

[Muhammad Rizki <kiizuha@gnuweeb.org>]

Move settingsNav items to navigations settings items to make breadcrumb
works properly.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/lib/components/customs/header.svelte      | 39 +++++++++++++++----
 src/lib/constants/navigations.ts              | 31 +++++++--------
 src/lib/typings/common.d.ts                   |  1 +
 src/lib/utilities/index.ts                    |  3 +-
 src/lib/utilities/navigation.ts               |  5 +++
 .../(components)/settings-header.svelte       |  3 +-
 .../(protected)/settings/+layout.svelte       |  5 +--
 src/routes/(protected)/settings/+page.ts      |  6 ++-
 8 files changed, 63 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/utilities/navigation.ts

diff --git a/src/lib/components/customs/header.svelte b/src/lib/components/customs/header.svelte
index 44c681e..6a343d5 100644
--- a/src/lib/components/customs/header.svelte
+++ b/src/lib/components/customs/header.svelte
@@ -4,12 +4,28 @@
   import { page } from "$app/state";
   import { navigations } from "$constants";
   import Separator from "$components/ui/separator/separator.svelte";
+  import * as typing from "$typings";
 
-  const getRouteName = () => {
-    const pathname = page.url.pathname;
-    const found = navigations.find((path) => path.url === pathname);
+  const getParentRoute = (
+    path: string,
+    items: typing.Navigations[],
+    routePath: typing.Navigations[] = []
+  ): typing.Navigations[] => {
+    for (const item of items) {
+      if (path === item.url) {
+        return [...routePath, item];
+      }
 
-    return found?.name ?? "";
+      if (item.items) {
+        const foundPath = getParentRoute(path, item.items, [...routePath, item]);
+        if (foundPath.length) return foundPath;
+      }
+    }
+    return [];
+  };
+
+  const getRouteName = () => {
+    return getParentRoute(page.url.pathname, navigations);
   };
 </script>
 
@@ -23,9 +39,18 @@
           <Breadcrumb.Link href="/">G/W Mail</Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Separator />
-        <Breadcrumb.Item class="select-none">
-          <Breadcrumb.Page>{getRouteName()}</Breadcrumb.Page>
-        </Breadcrumb.Item>
+        {#each getRouteName() as route, index (route.url)}
+          {#if index === getRouteName().length - 1}
+            <Breadcrumb.Item class="select-none">
+              <Breadcrumb.Page>{route.name}</Breadcrumb.Page>
+            </Breadcrumb.Item>
+          {:else}
+            <Breadcrumb.Item class="hidden md:block">
+              <Breadcrumb.Link href={route.url}>{route.name}</Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+          {/if}
+        {/each}
       </Breadcrumb.List>
     </Breadcrumb.Root>
   </div>
diff --git a/src/lib/constants/navigations.ts b/src/lib/constants/navigations.ts
index ca5e77b..4266930 100644
--- a/src/lib/constants/navigations.ts
+++ b/src/lib/constants/navigations.ts
@@ -1,6 +1,6 @@
 import * as typing from "$typings";
-import Home from "lucide-svelte/icons/home"
-import Settings from "lucide-svelte/icons/settings"
+import Home from "lucide-svelte/icons/home";
+import Settings from "lucide-svelte/icons/settings";
 
 export const navigations: typing.Navigations[] = [
   {
@@ -11,19 +11,18 @@ export const navigations: typing.Navigations[] = [
   {
     name: "Settings",
     icon: Settings,
-    url: "/settings"
+    url: "/settings",
+    items: [
+      {
+        name: "Profile",
+        description: "Manage your profile.",
+        url: "/settings/profile"
+      },
+      {
+        name: "Account",
+        description: "Manage your account credentials.",
+        url: "/settings/account"
+      }
+    ]
   }
 ] as const;
-
-export const settingsNav: typing.Navigations[] = [
-  {
-    name: "Profile",
-    description: "Manage your profile.",
-    url: "/settings/profile"
-  },
-  {
-    name: "Account",
-    description: "Manage your account credentials.",
-    url: "/settings/account"
-  }
-];
diff --git a/src/lib/typings/common.d.ts b/src/lib/typings/common.d.ts
index cdbe0d4..1f4a795 100644
--- a/src/lib/typings/common.d.ts
+++ b/src/lib/typings/common.d.ts
@@ -8,6 +8,7 @@ export interface Navigations {
   icon?: typeof IconType;
   url: string;
   disabled?: boolean;
+  items?: Navigations[]
 }
 
 export interface LabelAndValue {
diff --git a/src/lib/utilities/index.ts b/src/lib/utilities/index.ts
index ed0291d..48c622d 100644
--- a/src/lib/utilities/index.ts
+++ b/src/lib/utilities/index.ts
@@ -1,3 +1,4 @@
+import { getSettingsNav } from "./navigation";
 import { cn } from "./styling";
 
-export { cn };
+export { cn, getSettingsNav };
diff --git a/src/lib/utilities/navigation.ts b/src/lib/utilities/navigation.ts
new file mode 100644
index 0000000..4b84eca
--- /dev/null
+++ b/src/lib/utilities/navigation.ts
@@ -0,0 +1,5 @@
+import { navigations } from "$constants";
+
+export const getSettingsNav = () => {
+  return navigations.find((nav) => nav.url.includes("/settings"))?.items ?? [];
+};
diff --git a/src/routes/(protected)/settings/(components)/settings-header.svelte b/src/routes/(protected)/settings/(components)/settings-header.svelte
index cc13950..34e5900 100644
--- a/src/routes/(protected)/settings/(components)/settings-header.svelte
+++ b/src/routes/(protected)/settings/(components)/settings-header.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { page } from "$app/state";
-  import { settingsNav } from "$constants/navigations";
   import Separator from "$components/ui/separator/separator.svelte";
+  import { getSettingsNav } from "$utils";
 
+  const settingsNav = getSettingsNav();
   const activeNav = $derived(settingsNav.find((e) => page.url.pathname === e.url));
 </script>
 
diff --git a/src/routes/(protected)/settings/+layout.svelte b/src/routes/(protected)/settings/+layout.svelte
index 71e30d8..80d306a 100644
--- a/src/routes/(protected)/settings/+layout.svelte
+++ b/src/routes/(protected)/settings/+layout.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { Separator } from "$lib/components/ui/separator";
-
-  import { settingsNav } from "$constants/navigations";
   import SettingsNavigation from "./(components)/settings-nav.svelte";
   import SettingsHeader from "./(components)/settings-header.svelte";
+  import { getSettingsNav } from "$utils";
 
   let { children } = $props();
 </script>
@@ -16,7 +15,7 @@
   <Separator class="my-6" />
   <div class="flex flex-col space-y-8 xl:flex-row xl:space-x-8 xl:space-y-0">
     <aside class="xl:w-[12%]">
-      <SettingsNavigation items={settingsNav} />
+      <SettingsNavigation items={getSettingsNav()} />
     </aside>
     <div class="flex-1">
       <div class="space-y-6">
diff --git a/src/routes/(protected)/settings/+page.ts b/src/routes/(protected)/settings/+page.ts
index 3c846ad..c29023a 100644
--- a/src/routes/(protected)/settings/+page.ts
+++ b/src/routes/(protected)/settings/+page.ts
@@ -1,11 +1,13 @@
 import { redirect } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";
-import { settingsNav } from "$constants/navigations";
+import { getSettingsNav } from "$utils";
 
 export const load: PageLoad = async () => {
   // get first page that are not disabled.
+  const settingsNav = getSettingsNav();
   const firstPage = settingsNav.find((e) => !e.disabled);
+  const url = firstPage?.items?.[0].url ?? firstPage?.url;
 
   // if it don't exist, redirect to index page.
-  return redirect(307, firstPage?.url ?? "/");
+  return redirect(307, url ?? "/settings/profile");
 };
-- 
Muhammad Rizki