ui/routes/+layout.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

  import { AppBar } from '@skeletonlabs/skeleton';
  import { showMenu, currentUser } from '$lib/store';

  import CurrentUser from '$lib/components/CurrentUser.svelte';

  function toggleMenu(event) {
    event.preventDefault();
    showMenu.update((value) => !value);
  }

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

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

<AppBar class="app-bar">
  <svelte:fragment slot="lead">
    <button onclick={toggleMenu} class="cursor-pointer">
      <img class="w-8 h-8" alt="logo" src={logo} />
    </button>
  </svelte:fragment>
  <a href="/">understory</a>
  <svelte:fragment slot="trail">
    {#if $currentUser}
      <CurrentUser />
    {/if}
  </svelte:fragment>
</AppBar>

{@render children?.()}