summaryrefslogtreecommitdiff
path: root/ui/routes/+layout.svelte
blob: 18c0541672fd038000653079c9b2ecfaf7bcf288 (plain)
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script>
  import { setContext } from 'svelte';
  import { browser } from '$app/environment';
  import { goto, onNavigate, afterNavigate } from '$app/navigation';
  import { page } from '$app/stores';
  import '../app.css';
  import logo from '$lib/assets/logo.png';
  import { STORE_KEY_LAST_ACTIVE } from '$lib/constants';
  import { currentUser } from '$lib/store';

  let activeChannel = $derived($page.params.channel);

  let pageContext = $state({
    showMenu: false
  });
  setContext('page', pageContext);

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

  function getLastActiveChannel() {
    return (
      browser && JSON.parse(localStorage.getItem(STORE_KEY_LAST_ACTIVE))
    );
  }

  function setLastActiveChannel(channelId) {
    browser && localStorage.setItem(
      STORE_KEY_LAST_ACTIVE,
      JSON.stringify(channelId)
    );
  }

  afterNavigate(() => {
    const lastActiveChannel = getLastActiveChannel();
    if (!activeChannel && lastActiveChannel) {
      goto(`/ch/${lastActiveChannel}`);
    } else {
      setLastActiveChannel(activeChannel || null);
    }
  });

  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 $currentUser}
      <div>
        <a href="/me">@{$currentUser.username}</a>
      </div>
    {/if}
  </div>
</div>

{@render children?.()}