Layout with dynamic (changing) header based on current page

[bnn1]

Hi guys. I have this component:

<script lang="ts">
  type AppShellProps = {
    children: Snippet;
    header: Snippet;
  };

  const { children, header }: AppShellProps = $props();
</script>

<Sidebar.Provider style="--sidebar-width: 374px;">
  <AppSidebar />
  <Sidebar.Inset class="relative gap-y-4 pt-2 md:p-2">
    <Card class="sticky top-0 overflow-hidden rounded-none md:rounded-lg">
      <header class="bg-background flex shrink-0 items-center gap-2 border-b p-2 px-4">
        <!-- Dynamic Header Content Goes Here -->
        {@render header()}
      </header>
    </Card>
    <Card class="flex-1 rounded-none md:rounded-lg">
      <ScrollArea class="flex h-[calc(100svh-(--spacing(4))-64px)] flex-1 flex-col gap-4 md:p-4">
        {@render children()}
      </ScrollArea>
    </Card>
  </Sidebar.Inset>
</Sidebar.Provider>

And it's used in +layout.svelte like this:

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

<ParaglideJS {i18n}>
  <AppShell>
    {#snippet header()}
      <p>header content</p>
    {/snippet}
    {@render children?.()}
  </AppShell>
</ParaglideJS>

I have pages that use the same layout but with different header content. I thought maybe I can use a store for header snippet, so I tried it:

import { getContext, setContext, type Snippet } from "svelte";

class HeaderSnippetStore {
  #headerSnippet = $state<Snippet>();

  get headerSnippet() {
    return this.#headerSnippet;
  }

  setHeaderSnippet(snippet: Snippet) {
    this.#headerSnippet = snippet;
  }
}

const HEADER_SNIPPET_STORE_KEY = Symbol("header-snippet-store-key");

export function setHeaderSnippetStore() {
  return setContext(HEADER_SNIPPET_STORE_KEY, new HeaderSnippetStore());
}

export function getHeaderSnippetStore() {
  return getContext<ReturnType<typeof setHeaderSnippetStore>>(HEADER_SNIPPET_STORE_KEY);
}

<-- +layout.svelte -->
<script lang="ts">
  import { getHeaderSnippetStore, setHeaderSnippetStore } from './_stores/header-snippet.svelte';
  let { children } = $props();
  setHeaderSnippetStore();

  const headerSnippetStore = getHeaderSnippetStore();
</script>

<ParaglideJS {i18n}>
  <AppShell header={headerSnippetStore.headerSnippet}>
    {@render children?.()}
  </AppShell>
</ParaglideJS>

<-- first-page/+page.svelte -->
<script>
  import { getHeaderSnippetStore } from './_stores/header-snippet.svelte';

  const headerSnippetStore = getHeaderSnippetStore();
  headerSnippetStore.setHeaderSnippet(header);
</script>

{#snippet header()}
  <p>my header</p>
{/snippet}

<-- second-page/+page.svelte -->
<script>
  import { getHeaderSnippetStore } from './_stores/header-snippet.svelte';

  const headerSnippetStore = getHeaderSnippetStore();
  headerSnippetStore.setHeaderSnippet(header);
</script>

{#snippet header()}
  <p>another header for the second page</p>
{/snippet}

And it kinda works but the header becomes a client-side only component, it is not present in the html document I receive from the server.

Are there other ways to implement dynamic header? Ideally I want header to be presented in the html on initial page load.

[brunnerh]

There is a workaround, see comment here.

[brunnerh]

I would do it as in the linked comment; it is still a hack, but you don't have to put everything in the same file. You define a context, the pages set snippets on that context.

{@render children?.()} <!-- render page here, which *only* sets snippets -->
<ParaglideJS {i18n}>
  <AppShell header={snippets.header}>
    <!-- this is a snippet provided by the page as well, NOT the page itself -->
    {@render snippets.children?.()}
  </AppShell>
</ParaglideJS>

[bnn1]

I went with a different approach: on per-page basis, return the needed header from +page.ts (or +layout.ts to handle nested urls) load function:

import ChatsHeader from "../_components/layout/headers/chats-header.svelte";
import type { PageLoad } from "./$types";
// or LayoutLoad
export const load: PageLoad = () => {
  return {
    header: ChatsHeader
  }
}

Pass the header to AppShell in +layout.svelte:

<script lang="ts">
  import '../app.css';
  import { i18n } from '$lib/i18n';
  import { ParaglideJS } from '@inlang/paraglide-sveltekit';
  import AppShell from './_components/layout/app-shell.svelte';
  import { page } from '$app/state';

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

<ParaglideJS {i18n}>
  <AppShell header={page.data.header}>
    {@render children?.()}
  </AppShell>
</ParaglideJS>

This feels less bulky and better(?)

[brunnerh]

I personally prefer to only deal with data in load functions, but this works.

[bnn1]

i think it's actually a recommended approach. or at least it has a tutorial page: https://svelte.dev/tutorial/kit/using-both-load-functions

[brunnerh]

I would not exactly call it recommended, it just demonstrates that it is possible to return components from load functions if necessary, this should rarely be the case.