highlight active tab
This commit is contained in:
parent
0e65f04e1e
commit
1afd5b5404
2 changed files with 32 additions and 15 deletions
26
web/pw-server/src/lib/components/NavTab.svelte
Normal file
26
web/pw-server/src/lib/components/NavTab.svelte
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
export let href: string;
|
||||||
|
|
||||||
|
$: isActive = $page.url.pathname == href;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a class="nav-tab" {href} class:active={isActive}>
|
||||||
|
<slot></slot>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-tab {
|
||||||
|
padding: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab:hover {
|
||||||
|
background-color: rgb(246, 248, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab.active {
|
||||||
|
border-bottom: 2px solid #0080ff;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -16,7 +16,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { currentUser } from "$lib/stores/current_user";
|
import NavTab from "$lib/components/NavTab.svelte";
|
||||||
|
import { currentUser } from "$lib/stores/current_user";
|
||||||
|
|
||||||
export let bot;
|
export let bot;
|
||||||
export let owner;
|
export let owner;
|
||||||
|
@ -35,11 +36,11 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="bot-tabs">
|
<div class="bot-tabs">
|
||||||
<a class="bot-tab" href={`/bots/${bot.name}`}>index</a>
|
<NavTab href={`/bots/${bot.name}`}>index</NavTab>
|
||||||
<a class="bot-tab" href={`/bots/${bot.name}/matches`}>matches</a>
|
<NavTab href={`/bots/${bot.name}/matches`}>matches</NavTab>
|
||||||
<a class="bot-tab" href={`/bots/${bot.name}/stats`}>stats</a>
|
<NavTab href={`/bots/${bot.name}/stats`}>stats</NavTab>
|
||||||
{#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
|
{#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
|
||||||
<a class="bot-tab" href={`/bots/${bot.name}/versions`}>versions</a>
|
<NavTab href={`/bots/${bot.name}/versions`}>versions</NavTab>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -79,14 +80,4 @@
|
||||||
.bot-tabs {
|
.bot-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bot-tab {
|
|
||||||
padding: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bot-tab:hover {
|
|
||||||
background-color: rgb(246, 248, 250);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue