blackbirdchess-client-web/src/routes/+layout.svelte

<script lang="ts">
    import '$lib/scss/icons.scss'
	// Most of your app wide CSS should be put in this file
	import '../app.postcss';

    import {alerts, sessionstore} from '$lib/stores';
    import { autoModeWatcher } from '@skeletonlabs/skeleton';
    import { AppShell } from '@skeletonlabs/skeleton';
    import Header from '$lib/components/Header.svelte';
    import Sidebar from '$lib/components/Sidebar.svelte';

    let alertsvar;
    let sessionvars;
    function closeWarning(e) {
        let index = e.target.dataset.index;
        alerts.update(function (data) {
            data.splice(index, 1)
            return data;
        })
    }
    alerts.subscribe((value) => {
        alertsvar = value;
    });
    sessionstore.subscribe(value => {
        sessionvars = value;
    });
</script>
<style lang="scss">
    .alert {
      &.error {
        @apply variant-filled-error;
      }
      &.warning {
        @apply variant-filled-warning;
      }
      &.success {
        @apply variant-filled-success;
      }
    }
</style>
<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>

{#if typeof sessionvars.authorization === 'undefined'}
    <slot />
{:else}
    <AppShell slotSidebarLeft="bg-surface-200 dark:bg-surface-800 w-1/6 ml-4 mb-4 p-4 rounded-l-xl" regionPage="bg-surface-100 dark:bg-surface-900 mr-4 mb-4 p-4 rounded-r-xl">
        <svelte:fragment slot="header">
            <Header/>
        </svelte:fragment>
        <svelte:fragment slot="sidebarLeft">
                <Sidebar/>
        </svelte:fragment>
        <slot />
    </AppShell>
{/if}