From 540bbbdad7e3feb0e2b3ee0dbdf4f6e8f4ef9e61 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 20 Nov 2024 14:14:37 +0600
Subject: [PATCH] web/SidebarTab: pass icon prop instead of using slot
---
web/src/components/sidebar/Sidebar.svelte | 28 ++++++--------------
web/src/components/sidebar/SidebarTab.svelte | 19 +++++++------
2 files changed, 19 insertions(+), 28 deletions(-)
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index ca3a963e..39407a19 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -19,8 +19,8 @@
let aboutLink = defaultNavPage("about");
$: screenWidth,
- settingsLink = defaultNavPage("settings"),
- aboutLink = defaultNavPage("about");
+ (settingsLink = defaultNavPage("settings")),
+ (aboutLink = defaultNavPage("about"));
</script>
<svelte:window bind:innerWidth={screenWidth} />
@@ -29,26 +29,14 @@
<CobaltLogo />
<div id="sidebar-tabs" role="tablist">
<div id="sidebar-actions" class="sidebar-inner-container">
- <SidebarTab tabName="save" tabLink="/">
- <IconDownload />
- </SidebarTab>
- <SidebarTab tabName="remux" tabLink="/remux" beta>
- <IconRepeat />
- </SidebarTab>
+ <SidebarTab name="save" path="/" icon={IconDownload} />
+ <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
</div>
<div id="sidebar-info" class="sidebar-inner-container">
- <SidebarTab tabName="settings" tabLink={settingsLink}>
- <IconSettings />
- </SidebarTab>
- <SidebarTab tabName="donate" tabLink="/donate">
- <IconHeart />
- </SidebarTab>
- <SidebarTab tabName="updates" tabLink="/updates">
- <IconComet />
- </SidebarTab>
- <SidebarTab tabName="about" tabLink={aboutLink}>
- <IconInfoCircle />
- </SidebarTab>
+ <SidebarTab name="settings" path={settingsLink} icon={IconSettings} />
+ <SidebarTab name="donate" path="/donate" icon={IconHeart} />
+ <SidebarTab name="updates" path="/updates" icon={IconComet} />
+ <SidebarTab name="about" path={aboutLink} icon={IconInfoCircle} />
</div>
</div>
</nav>
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 9f3b51ef..2330039f 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -3,8 +3,10 @@
import { t } from "$lib/i18n/translations";
- export let tabName: string;
- export let tabLink: string;
+ export let name: string;
+ export let path: string;
+ export let icon: ConstructorOfATypedSvelteComponent;
+
export let beta = false;
const firstTabPage = ["save", "remux", "settings"];
@@ -12,14 +14,14 @@
let tab: HTMLElement;
$: currentTab = $page.url.pathname.split("/")[1];
- $: baseTabPath = tabLink.split("/")[1];
+ $: baseTabPath = path.split("/")[1];
$: isTabActive = currentTab === baseTabPath;
const showTab = (e: HTMLElement) => {
if (e) {
e.scrollIntoView({
- inline: firstTabPage.includes(tabName) ? "end" : "start",
+ inline: firstTabPage.includes(name) ? "end" : "start",
block: "nearest",
behavior: "smooth",
});
@@ -32,10 +34,10 @@
</script>
<a
- id="sidebar-tab-{tabName}"
+ id="sidebar-tab-{name}"
class="sidebar-tab"
class:active={isTabActive}
- href={tabLink}
+ href={path}
bind:this={tab}
on:focus={() => showTab(tab)}
role="tab"
@@ -44,8 +46,9 @@
{#if beta}
<div class="beta-sign" aria-label={$t("general.beta")}>β</div>
{/if}
- <slot></slot>
- {$t(`tabs.${tabName}`)}
+
+ <svelte:component this={icon} />
+ {$t(`tabs.${name}`)}
</a>
<style>