From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on server-vie001.gnuweeb.org X-Spam-Level: X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED, DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_DBL_BLOCKED_OPENDNS, URIBL_ZEN_BLOCKED_OPENDNS autolearn=ham autolearn_force=no version=3.4.6 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org; s=default; t=1741185655; bh=r62XmgWePiKvYgyO8qKhap6PzWd0gb5irXkuTWwVd1Y=; h=From:To:Cc:Subject:Date:Message-ID:In-Reply-To:References: MIME-Version:Content-Transfer-Encoding:Message-ID:Date:From: Reply-To:Subject:To:Cc:In-Reply-To:References:Resent-Date: Resent-From:Resent-To:Resent-Cc:User-Agent:Content-Type: Content-Transfer-Encoding; b=WY841y7eRjt4MQvF17t6Q052nLNgmQWcqtwHXEnC1HyQe3xyg1eHuNUpG8xoH5NxV waQ+JHasP6a0iKYOFG8T8CyMbA8yGpX1nq8dXYwjmJH4QF+y7kTYpsjn3G/bW1UAIR VJyYvp/QdzfJ8n/e6dUdhXedbd9I3CQ6wvfs6+BMJk50nFBdAd1pDxbEsqnuYnOXBI 8cqz9IH4tIZXdpJI6FfJWEIRQAwmKEHyG+H98DlGlEdDy5JdY9WMCckQOMHMrWn96W mJ0KEjHcI87VfiWPMC/GgcAUFFde0jU1cZ/cYALMBRD6NcFhQSmeoo6YYMJLZkQE8G iKkfd0+sTzczw== Received: from localhost.localdomain (unknown [203.217.140.198]) by server-vie001.gnuweeb.org (Postfix) with ESMTPSA id A826620B4831; Wed, 5 Mar 2025 14:40:54 +0000 (UTC) From: Muhammad Rizki To: Ammar Faizi Cc: Muhammad Rizki , Alviro Iskandar Setiawan , GNU/Weeb Mailing List Subject: [PATCH v1 06/17] fix(breadcrumb): Move settingsNav to settings items navigations Date: Wed, 5 Mar 2025 21:40:05 +0700 Message-ID: <20250305144018.267-7-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.46.0.windows.1 In-Reply-To: <20250305144018.267-1-kiizuha@gnuweeb.org> References: <20250305144018.267-1-kiizuha@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: Move settingsNav items to navigations settings items to make breadcrumb works properly. Signed-off-by: Muhammad Rizki --- 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); }; @@ -23,9 +39,18 @@ G/W Mail - - {getRouteName()} - + {#each getRouteName() as route, index (route.url)} + {#if index === getRouteName().length - 1} + + {route.name} + + {:else} + + + {/if} + {/each} 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 @@ 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 @@ @@ -16,7 +15,7 @@
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