aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/lib/components/NavTab.svelte
blob: 611f233b17c6101cc8b483faf48e0cb2923b9cd1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 />
</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>