mirror of
https://github.com/wukko/cobalt.git
synced 2025-01-22 10:46:19 +01:00
web/PageNavTab: use icon prop instead of slot
This commit is contained in:
wukko
parent
a0616841bf
commit
1833a95027
3 changed files with 62 additions and 72 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue