<script>
  import Page from "$components/page.svelte";
  import Language from "$components/language.svelte";

  import { _ } from "$lib/locale.js";
</script>

<nav>
  <h3>ngn.tf</h3>
  <div>
    <Page link="/">{$_("navbar.home")}</Page>
    <Page link="/services">{$_("navbar.services")}</Page>
    <Page link="/donate">{$_("navbar.donate")}</Page>
    <Language />
  </div>
</nav>

<style>
  nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    background: var(--glass);
    box-shadow: var(--box-shadow);
    border-bottom: solid 2px var(--color);

    padding: 15px 40px;
  }

  nav div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: right;
    gap: 15px;
  }

  nav h3 {
    color: var(--color);
    font-family: var(--monospace);
    font-size: var(--size-4);
    font-weight: 900;
  }
</style>
