<script>
import { page } from '$app/stores';
import Header from '$lib/components/Header.svelte'
import UserHeader from '$lib/components/UserHeader.svelte';
let { data, children } = $props();

function isActive(path) {
	const currentPath = $page.url.pathname;
	// Check if current path starts with the link path
	return currentPath.startsWith(path);
}
</script>
<Header>
	{#snippet links()}
		<ul class=site_header>
		<li><a href="/glaube/gebete" class:active={isActive('/glaube/gebete')}>Gebete</a></li>
		<li><a href="/glaube/rosenkranz" class:active={isActive('/glaube/rosenkranz')}>Rosenkranz</a></li>
		<li><a href="/glaube/predigten" class:active={isActive('/glaube/predigten')}>Predigten</a></li>
		</ul>
	{/snippet}

	{#snippet right_side()}
		<UserHeader user={data.session?.user}></UserHeader>
	{/snippet}

	{@render children()}
</Header>
