<script>
	import Navbar from '../components/Navbar.svelte';
	import favicon from '$lib/assets/favicon-32x32.png';
	import { scrollProgress } from '$lib/stores/scrollStore';
	import { afterNavigate } from '$app/navigation';

	let { children } = $props();
	let mainElement;

	function handleScroll(e) {
		const scrollTop = e.target.scrollTop;
		const maxScroll = 300;
		const progress = Math.min(scrollTop / maxScroll, 1);
		scrollProgress.set(progress);
	}

	// Reset scroll to top on navigation
	afterNavigate(() => {
		if (mainElement) {
			mainElement.scrollTop = 0;
		}
	});
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<div class="main" bind:this={mainElement} onscroll={handleScroll}>
	<Navbar />
	{@render children()}
</div>

<style lang="scss">
	.main {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
	}
</style>