highlight active tab

This commit is contained in:
Ilion Beyst 2022-11-01 23:04:46 +01:00
parent 0e65f04e1e
commit 1afd5b5404
2 changed files with 32 additions and 15 deletions

View 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>

View file

@ -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>