bandolier-template/commands/templates/client/Layout.svelte

<script>
  import LoggedIn from '$/client/components/LoggedIn.svelte';
  import Spinner from '$/client/components/Spinner.svelte';
  import Footer from '$/client/Footer.svelte';
  import Header from '$/client/Header.svelte';

  export let fixed = false;
  export let footer = true;
  export let header = true;
  export let authenticated = false;
  export let testid = "page";
  export let centered = false;
  export let fullscreen = false;
  export let fullwidth = false;
  export let auth_optional = false;
  export let horizontal = false;
</script>

{#if authenticated || auth_optional}
  {#if header}
    <Header fixed={fixed}/>
  {/if}

  <LoggedIn optional={ auth_optional } redirect="/login" show_required_page={ false }>
    <main class:horizontal class:fullwidth class:fullscreen class:centered slot="yes" data-testid={ testid }>
      <slot></slot>
    </main>
    <main class:horizontal class:fullwidth class:fullscreen class:centered slot="no" data-testid={ testid }>
      <Spinner color="var(--value8)" />
    </main>
  </LoggedIn>

  {#if footer}
    <Footer />
  {/if}
{:else}
  {#if header}
    <Header fixed={fixed}/>
  {/if}

  <main class:horizontal class:fullwidth class:fullscreen class:centered data-testid={ testid }>
    <slot></slot>
  </main>

  {#if footer}
    <Footer />
  {/if}
{/if}