diff options
| author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-11-01 23:04:46 +0100 |
|---|---|---|
| committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-11-01 23:04:46 +0100 |
| commit | 1afd5b5404a1c064abfe6711b95d59ea1bb13022 (patch) | |
| tree | 3a20487a92c54d99481e2bf1e51e3a2d047cca80 | |
| parent | 0e65f04e1e780865f80660df315e800e6b0cbccd (diff) | |
| download | planetwars.dev-1afd5b5404a1c064abfe6711b95d59ea1bb13022.tar.xz planetwars.dev-1afd5b5404a1c064abfe6711b95d59ea1bb13022.zip | |
highlight active tab
| -rw-r--r-- | web/pw-server/src/lib/components/NavTab.svelte | 26 | ||||
| -rw-r--r-- | web/pw-server/src/routes/bots/[bot_name]/__layout.svelte | 21 |
2 files changed, 32 insertions, 15 deletions
diff --git a/web/pw-server/src/lib/components/NavTab.svelte b/web/pw-server/src/lib/components/NavTab.svelte new file mode 100644 index 0000000..2a93897 --- /dev/null +++ b/web/pw-server/src/lib/components/NavTab.svelte @@ -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> diff --git a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte index f445cbb..4393af6 100644 --- a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte +++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte @@ -16,7 +16,8 @@ </script> <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 owner; @@ -35,11 +36,11 @@ {/if} </div> <div class="bot-tabs"> - <a class="bot-tab" href={`/bots/${bot.name}`}>index</a> - <a class="bot-tab" href={`/bots/${bot.name}/matches`}>matches</a> - <a class="bot-tab" href={`/bots/${bot.name}/stats`}>stats</a> + <NavTab href={`/bots/${bot.name}`}>index</NavTab> + <NavTab href={`/bots/${bot.name}/matches`}>matches</NavTab> + <NavTab href={`/bots/${bot.name}/stats`}>stats</NavTab> {#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} </div> </div> @@ -79,14 +80,4 @@ .bot-tabs { display: flex; } - - .bot-tab { - padding: 8px; - text-decoration: none; - color: black; - } - - .bot-tab:hover { - background-color: rgb(246, 248, 250); - } </style> |