aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/routes/+layout.svelte
blob: 8f0a99fe3832c88c4d713544dc0d7751a7c162de (plain) (blame)
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
69
70
71
72
<script lang="ts">
  import Navigation from '$lib/components/Navigation.svelte'
  import "iconify-icon"
  import {
    AppBar,
    AppShell,
    Drawer,
    LightSwitch,
    Toast,
    getDrawerStore,
    initializeStores,
  } from '@skeletonlabs/skeleton'
  import { pwaInfo } from 'virtual:pwa-info'
  import '../app.postcss'

  // Floating UI for Popups
  // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
  // import { storePopup } from '@skeletonlabs/skeleton';
  // storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });

  initializeStores()

  const drawerStore = getDrawerStore()

  function drawerOpen() {
    drawerStore.open({
      width: 'w-[80px]',
    })
  }

  $: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
</script>

<svelte:head>
  <!-- eslint-disable-next-line svelte/no-at-html-tags VitePWA can probably be trusted -->
  {@html webManifest}
</svelte:head>

<Drawer>
  <Navigation menu />
</Drawer>

<Toast position="br" />

<!-- App Shell -->
<AppShell slotSidebarLeft="w-0 md:w-20">
  <svelte:fragment slot="header">
    <!-- App Bar -->
    <AppBar>
      <svelte:fragment slot="lead">
        <div class="flex items-center">
          <button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen} title="Menu" type="button">
            <iconify-icon icon="carbon:menu" width="25" />
          </button>
          <strong class="text-xl uppercase">Nothing</strong>
        </div>
      </svelte:fragment>
      <svelte:fragment slot="trail">
        <LightSwitch />
      </svelte:fragment>
    </AppBar>
  </svelte:fragment>
  <svelte:fragment slot="sidebarLeft">
    <Navigation />
  </svelte:fragment>
  <!-- Page Route Content -->
  <slot />
</AppShell>

{#await import('$lib/components/ReloadPrompt.svelte') then { default: ReloadPrompt }}
  <ReloadPrompt />
{/await}