mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2024-12-28 02:26:10 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

web/SidebarTab: pass icon prop instead of using slot

Browse source
This commit is contained in:
wukko 2024-11-20 14:14:37 +06:00
parent 7b9830c5af
commit 540bbbdad7
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 19 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/components/sidebar/Sidebar.svelte
View file

@ -19,8 +19,8 @@
let aboutLink = defaultNavPage("about"); let aboutLink = defaultNavPage("about");
$: screenWidth, $: screenWidth,
settingsLink = defaultNavPage("settings"), (settingsLink = defaultNavPage("settings")),
aboutLink = defaultNavPage("about"); (aboutLink = defaultNavPage("about"));
</script> </script>
<svelte:window bind:innerWidth={screenWidth} /> <svelte:window bind:innerWidth={screenWidth} />
@ -29,26 +29,14 @@
<CobaltLogo /> <CobaltLogo />
<div id="sidebar-tabs" role="tablist"> <div id="sidebar-tabs" role="tablist">
<div id="sidebar-actions" class="sidebar-inner-container"> <div id="sidebar-actions" class="sidebar-inner-container">
<SidebarTab tabName="save" tabLink="/"> <SidebarTab name="save" path="/" icon={IconDownload} />
<IconDownload /> <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
</SidebarTab>
<SidebarTab tabName="remux" tabLink="/remux" beta>
<IconRepeat />
</SidebarTab>
</div> </div>
<div id="sidebar-info" class="sidebar-inner-container"> <div id="sidebar-info" class="sidebar-inner-container">
<SidebarTab tabName="settings" tabLink={settingsLink}> <SidebarTab name="settings" path={settingsLink} icon={IconSettings} />
<IconSettings /> <SidebarTab name="donate" path="/donate" icon={IconHeart} />
</SidebarTab> <SidebarTab name="updates" path="/updates" icon={IconComet} />
<SidebarTab tabName="donate" tabLink="/donate"> <SidebarTab name="about" path={aboutLink} icon={IconInfoCircle} />
<IconHeart />
</SidebarTab>
<SidebarTab tabName="updates" tabLink="/updates">
<IconComet />
</SidebarTab>
<SidebarTab tabName="about" tabLink={aboutLink}>
<IconInfoCircle />
</SidebarTab>
</div> </div>
</div> </div>
</nav> </nav>

19
web/src/components/sidebar/SidebarTab.svelte
View file

@ -3,8 +3,10 @@
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
export let tabName: string; export let name: string;
export let tabLink: string; export let path: string;
export let icon: ConstructorOfATypedSvelteComponent;
export let beta = false; export let beta = false;
const firstTabPage = ["save", "remux", "settings"]; const firstTabPage = ["save", "remux", "settings"];
@ -12,14 +14,14 @@
let tab: HTMLElement; let tab: HTMLElement;
$: currentTab = $page.url.pathname.split("/")[1]; $: currentTab = $page.url.pathname.split("/")[1];
$: baseTabPath = tabLink.split("/")[1]; $: baseTabPath = path.split("/")[1];
$: isTabActive = currentTab === baseTabPath; $: isTabActive = currentTab === baseTabPath;
const showTab = (e: HTMLElement) => { const showTab = (e: HTMLElement) => {
if (e) { if (e) {
e.scrollIntoView({ e.scrollIntoView({
inline: firstTabPage.includes(tabName) ? "end" : "start", inline: firstTabPage.includes(name) ? "end" : "start",
block: "nearest", block: "nearest",
behavior: "smooth", behavior: "smooth",
}); });
@ -32,10 +34,10 @@
</script> </script>
<a <a
id="sidebar-tab-{tabName}" id="sidebar-tab-{name}"
class="sidebar-tab" class="sidebar-tab"
class:active={isTabActive} class:active={isTabActive}
href={tabLink} href={path}
bind:this={tab} bind:this={tab}
on:focus={() => showTab(tab)} on:focus={() => showTab(tab)}
role="tab" role="tab"
@ -44,8 +46,9 @@
{#if beta} {#if beta}
<div class="beta-sign" aria-label={$t("general.beta")}>β</div> <div class="beta-sign" aria-label={$t("general.beta")}>β</div>
{/if} {/if}
<slot></slot>
{$t(`tabs.${tabName}`)} <svelte:component this={icon} />
{$t(`tabs.${name}`)}
</a> </a>
<style> <style>