aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/lib/components
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-11-01 23:04:46 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-11-01 23:04:46 +0100
commit1afd5b5404a1c064abfe6711b95d59ea1bb13022 (patch)
tree3a20487a92c54d99481e2bf1e51e3a2d047cca80 /web/pw-server/src/lib/components
parent0e65f04e1e780865f80660df315e800e6b0cbccd (diff)
downloadplanetwars.dev-1afd5b5404a1c064abfe6711b95d59ea1bb13022.tar.xz
planetwars.dev-1afd5b5404a1c064abfe6711b95d59ea1bb13022.zip
highlight active tab
Diffstat (limited to 'web/pw-server/src/lib/components')
-rw-r--r--web/pw-server/src/lib/components/NavTab.svelte26
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>