From 1833a95027f0d780dc7213a24adf3d22f98fbb2b Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Wed, 20 Nov 2024 14:15:34 +0600 Subject: [PATCH] web/PageNavTab: use icon prop instead of slot --- web/src/components/subnav/PageNavTab.svelte | 13 ++-- web/src/routes/about/+layout.svelte | 45 ++++++------ web/src/routes/settings/+layout.svelte | 76 ++++++++++----------- 3 files changed, 62 insertions(+), 72 deletions(-) diff --git a/web/src/components/subnav/PageNavTab.svelte b/web/src/components/subnav/PageNavTab.svelte index 898174fd..b828edb6 100644 --- a/web/src/components/subnav/PageNavTab.svelte +++ b/web/src/components/subnav/PageNavTab.svelte @@ -3,25 +3,26 @@ import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte"; - export let tabPath: string; - export let tabTitle: string; + export let path: string; + export let title: string; + export let icon: ConstructorOfATypedSvelteComponent; export let iconColor: "gray" | "blue" | "green" = "gray"; - $: isActive = $page.url.pathname === tabPath; + $: isActive = $page.url.pathname === path; </script> <a class="subnav-tab" - href={tabPath} + href={path} class:active={isActive} role="button" > <div class="subnav-tab-left"> <div class="tab-icon" style="background: var(--{iconColor})"> - <slot></slot> + <svelte:component this={icon} /> </div> <div class="subnav-tab-text"> - {tabTitle} + {title} </div> </div> <div class="subnav-tab-chevron"> diff --git a/web/src/routes/about/+layout.svelte b/web/src/routes/about/+layout.svelte index ddfb1c6f..e28df42b 100644 --- a/web/src/routes/about/+layout.svelte +++ b/web/src/routes/about/+layout.svelte @@ -23,43 +23,38 @@ <svelte:fragment slot="navigation"> <PageNavSection> <PageNavTab - tabPath="/about/general" - tabTitle={$t("about.page.general")} + path="/about/general" + title={$t("about.page.general")} + icon={IconComet} iconColor="blue" - > - <IconComet /> - </PageNavTab> + /> <PageNavTab - tabPath="/about/community" - tabTitle={$t("about.page.community")} + path="/about/community" + title={$t("about.page.community")} + icon={IconUsersGroup} iconColor="green" - > - <IconUsersGroup /> - </PageNavTab> + /> </PageNavSection> <PageNavSection> <PageNavTab - tabPath="/about/terms" - tabTitle={$t("about.page.terms")} + path="/about/terms" + title={$t("about.page.terms")} + icon={IconChecklist} iconColor="gray" - > - <IconChecklist /> - </PageNavTab> + /> <PageNavTab - tabPath="/about/privacy" - tabTitle={$t("about.page.privacy")} + path="/about/privacy" + title={$t("about.page.privacy")} + icon={IconLock} iconColor="gray" - > - <IconLock /> - </PageNavTab> + /> <PageNavTab - tabPath="/about/credits" - tabTitle={$t("about.page.credits")} + path="/about/credits" + title={$t("about.page.credits")} + icon={IconLicense} iconColor="gray" - > - <IconLicense /> - </PageNavTab> + /> </PageNavSection> </svelte:fragment> diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte index cbcd5282..79bd7b93 100644 --- a/web/src/routes/settings/+layout.svelte +++ b/web/src/routes/settings/+layout.svelte @@ -20,7 +20,9 @@ import IconWorld from "@tabler/icons-svelte/IconWorld.svelte"; import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte"; - $: versionText = $version ? `v${$version.version}-${$version.commit.slice(0, 8)}` : '\xa0'; + $: versionText = $version + ? `v${$version.version}-${$version.commit.slice(0, 8)}` + : "\xa0"; </script> <PageNav @@ -32,68 +34,60 @@ <svelte:fragment slot="navigation"> <PageNavSection> <PageNavTab - tabPath="/settings/appearance" - tabTitle={$t("settings.page.appearance")} + path="/settings/appearance" + title={$t("settings.page.appearance")} + icon={IconSunHigh} iconColor="blue" - > - <IconSunHigh /> - </PageNavTab> + /> <PageNavTab - tabPath="/settings/privacy" - tabTitle={$t("settings.page.privacy")} + path="/settings/privacy" + title={$t("settings.page.privacy")} + icon={IconLock} iconColor="blue" - > - <IconLock /> - </PageNavTab> + /> </PageNavSection> <PageNavSection> <PageNavTab - tabPath="/settings/video" - tabTitle={$t("settings.page.video")} + path="/settings/video" + title={$t("settings.page.video")} + icon={IconMovie} iconColor="green" - > - <IconMovie /> - </PageNavTab> + /> <PageNavTab - tabPath="/settings/audio" - tabTitle={$t("settings.page.audio")} + path="/settings/audio" + title={$t("settings.page.audio")} + icon={IconMusic} iconColor="green" - > - <IconMusic /> - </PageNavTab> + /> <PageNavTab - tabPath="/settings/download" - tabTitle={$t("settings.page.download")} + path="/settings/download" + title={$t("settings.page.download")} + icon={IconFileDownload} iconColor="green" - > - <IconFileDownload /> - </PageNavTab> + /> </PageNavSection> <PageNavSection> <PageNavTab - tabPath="/settings/instances" - tabTitle={$t("settings.page.instances")} + path="/settings/instances" + title={$t("settings.page.instances")} + icon={IconWorld} iconColor="gray" - > - <IconWorld /> - </PageNavTab> + /> <PageNavTab - tabPath="/settings/advanced" - tabTitle={$t("settings.page.advanced")} + path="/settings/advanced" + title={$t("settings.page.advanced")} + icon={IconSettingsBolt} iconColor="gray" - > - <IconSettingsBolt /> - </PageNavTab> + /> {#if $settings.advanced.debug} <PageNavTab - tabPath="/settings/debug" - tabTitle={$t("settings.page.debug")} + path="/settings/debug" + title={$t("settings.page.debug")} + icon={IconBug} iconColor="gray" - > - <IconBug /> - </PageNavTab> + /> {/if} </PageNavSection> </svelte:fragment>