<script>
  import "../app.css";
  import InvertableIcon from '$lib/components/InvertableIcon.svelte';
  import DatePicker from '$lib/components/DatePicker.svelte';
</script>

<div class="max-w-3xl mx-auto">
<header>
  <nav class="flex justify-between mx-4 my-4 h-4 min-h-4">

    <DatePicker />
    <div class="flex space-x-2">
    <a href="/">Home</a>
    <div class="h-5 w-5">
    <a href="/journal"><InvertableIcon label="Journal" icon="/pen-solid.svg" /></a>
    </div>
    <div class="h-5 w-5">
    <a href="/plan"><InvertableIcon label="Plan" icon="/calendar-check-solid.svg" /></a>
    </div>
    <div class="h-5 w-5">
    <a href="/tracking"><InvertableIcon label="Tracking" icon="/chart-line-solid.svg" /></a>
    </div>
    <div class="h-5 w-5">
    <a href="/inbox"><InvertableIcon label="Inbox" icon="/file-alt-solid.svg" /></a>
    </div>
  </div>
  </nav>

  <div class="flex justify-center">
    <div class="w-9/12 mt-3">
      <hr class=" border-slate-300 border-solid border-0.5"/>
    </div>
  </div>
</header>

<slot />
</div>