🏡 index : ~doyle/blocks.ls.git

<script>
  import { _ } from "svelte-i18n";
  import "../global.scss";
  import { page } from "$app/stores";
</script>

<header>
  <div class="flex items-center">
    <div class="flex items-center mr-auto">
      <a href="/">
        <img src="/logo.svg" style="height: 30px;" class="inline-block mr-2" />
        <span class="font-bold">{$_("site_name")}</span>
      </a>
    </div>

    <nav>
      <a href="/" class:active={$page.url.pathname === "/"}>{$_("nav.dashboard")}</a>
      <a href="/block" class:active={$page.url.pathname.startsWith("/block")}>{$_("nav.blocks")}</a>
      <a href="/tx" class:active={$page.url.pathname.startsWith("/tx")}>{$_("nav.txns")}</a>
    </nav>
  </div>
</header>

<slot />

<style lang="scss">
  header {
    @apply p-5 bg-transparent border-b border-slate-50/[0.06] text-white;

    a {
      @apply text-white;
    }

    & > div {
      max-width: 90rem;
      @apply mx-auto;
    }

    nav {
      @apply space-x-5;

      a {
        &:hover {
          @apply text-slate-400;
        }

        &.active {
          @apply text-orange-400;
        }
      }
    }
  }
</style>