Shallie/src/routes/+layout.svelte

<script lang="ts">
	import { navigating } from '$app/stores';
	import { goto } from '$app/navigation';
	import { browseSettings } from '$lib/content/contentApi';

	import Base from '@damillora/plachta/components/Base/Base.svelte';
	import Footer from '@damillora/plachta/components/Footer/Footer.svelte';
	import Header from '@damillora/plachta/components/Header/Header.svelte';
	import NavDarkMode from '@damillora/plachta/components/Nav/NavDarkMode.svelte';
	import NavMenu from '@damillora/plachta/components/Nav/NavMenu.svelte';
	import NavSearch from '@damillora/plachta/components/Nav/NavSearch.svelte';
	import NavigationLoading from '@damillora/plachta/components/NavigationLoading/NavigationLoading.svelte';
	import type { Load } from '@sveltejs/kit';

	const doSearch = (e: any) => {
		if (e.detail.query) {
			goto('/search?q=' + e.detail.query, { replaceState: true, keepfocus: true });
		} else {
			goto('/', { replaceState: true, keepfocus: true });
		}
	};

	export let data;

	let loading = true;
	navigating.subscribe((x) => (loading = x != null));
</script>

<svelte:head>
	{@html data.header}
</svelte:head>
<Base>
	<Header>
		<svelte:fragment slot="title">
			<a href="/"> <strong>Damillora</strong>'s Virtual Memoir </a>
		</svelte:fragment>
		<svelte:fragment slot="nav">
			<NavMenu label="nanao.moe" url="https://nanao.moe" />
			<NavDarkMode />
			<NavSearch on:search={doSearch} />
		</svelte:fragment>
	</Header>

	<slot />
	{@html data.footer}
	<Footer>
		<p>Copyright (c) 2023 Damillora</p>
	</Footer>
</Base>

<NavigationLoading {loading} />

<style lang="scss">
	// Responsive embeds
	:global(.fluid-width-video-wrapper) {
		width: 100%;
		position: relative;
		padding: 0;
		:global(iframe),
		:global(object),
		:global(embed) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
</style>