<script>
  import { page } from '$app/stores';
  import { fade } from 'svelte/transition'

  let dropdownVisible = false
</script>

<nav class="desktop">
    <svg viewBox="0 0 2 3" aria-hidden="true">
        <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
    </svg>
    <ul class="desktop">
        <li class:active={$page.url.pathname === '/'}>
            <a sveltekit:prefetch href="/">Topic Search</a>
        </li>
        <!--
        <li class:active={$page.url.pathname === '/post-message'}>
            <a sveltekit:prefetch href="/post-message">Post Message</a>
        </li>
        -->
        <li class:active={$page.url.pathname === '/settings'}>
            <a sveltekit:prefetch href="/settings">Settings</a>
        </li>
    </ul>
    <svg viewBox="0 0 2 3" aria-hidden="true">
        <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
    </svg>
</nav>

<nav class="mobile">
    <button style="font-size: 3rem;" on:click={() => dropdownVisible = !dropdownVisible}>{dropdownVisible ? 'x' : '≡'}</button>
    {#if dropdownVisible}
        <!-- TODO: Click-away layer -->
        <ul class="mobile" transition:fade={{duration: 300}}>
            <li class:active={$page.url.pathname === '/'}>
                <a sveltekit:prefetch href="/">Topic Search</a>
            </li>
            <!--
            <li class:active={$page.url.pathname === '/post-message'}>
                <a sveltekit:prefetch href="/post-message">Post Message</a>
            </li>
            -->
            <li class:active={$page.url.pathname === '/settings'}>
                <a sveltekit:prefetch href="/settings">Settings</a>
            </li>
        </ul>
    {/if}
</nav>

<style>
    nav {
      display: flex;
      justify-content: center;
      --background: rgba(255, 255, 255, 0.7);
    }

    nav.mobile {
        flex-direction: column;
        align-items: end;
    }

    svg {
      width: 2em;
      height: 3em;
      display: block;
    }

    path {
      fill: var(--background);
    }

    ul.desktop {
      position: relative;
      padding: 0;
      margin: 0;
      height: 3em;
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      background: var(--background);
      background-size: contain;
    }

    ul.mobile {
        flex-direction: column;
        position: absolute;
        padding: 256px 0 1em;
        margin: 0;
        width: 50vw;
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        background-color: rgba(255, 255, 255);
        background-size: contain;
    }

    li {
      position: relative;
      height: 100%;
    }

    li.active::before {
      --size: 6px;
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: calc(50% - var(--size));
      border: var(--size) solid transparent;
      border-top: var(--size) solid var(--accent-color);
    }

    nav a {
      display: flex;
      height: 100%;
      align-items: center;
      padding: 0 1em;
      color: var(--heading-color);
      font-weight: 700;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-decoration: none;
      transition: color 0.2s linear;
    }

    @media (max-width: 719px) {
        nav a {
            font-size: 1rem;
            line-height: 200%;
        }
        li {
            margin-top: 1em;
        }
    }

    a:hover {
      color: var(--accent-color);
    }

    button {
        z-index: 1;
        padding: 0;
        height: 64px;
        width: 64px;
        font-size: 64px;
        border-radius: 0;
        border-style: none;
    }
    button:hover {
        background-color: white;
    }

</style>