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 /web/pw-server/src/lib | |
| parent | 0e65f04e1e780865f80660df315e800e6b0cbccd (diff) | |
| download | planetwars.dev-1afd5b5404a1c064abfe6711b95d59ea1bb13022.tar.xz planetwars.dev-1afd5b5404a1c064abfe6711b95d59ea1bb13022.zip | |
highlight active tab
Diffstat (limited to 'web/pw-server/src/lib')
| -rw-r--r-- | web/pw-server/src/lib/components/NavTab.svelte | 26 |
1 files changed, 26 insertions, 0 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> |