<script>
  import { setContext } from 'svelte';
  import { onNavigate } from '$app/navigation';
  import { page } from '$app/state';
  import '../app.css';
  import logo from '$lib/assets/logo.png';

  const session = $derived(page.data.session);
  let pageContext = $state({
    showMenu: false,
  });
  setContext('page', pageContext);

  function toggleMenu(event) {
    event.preventDefault();
    pageContext.showMenu = !pageContext.showMenu;
  }

  onNavigate(() => {
    pageContext.showMenu = false;
  });

  let { children } = $props();
</script>

<div class="app-bar">
  <div class="lead">
    <button onclick={toggleMenu}>
      <img alt="logo" src={logo} />
    </button>
  </div>
  <a href="/">pilcrow</a>
  <div class="trail">
    {#if session}
      <div>
        <a href="/me">@{session.currentUser.name}</a>
      </div>
    {/if}
  </div>
</div>

{@render children?.()}
