<script lang="ts">
	import '../app.css';
	import favicon from '$lib/assets/favicon.svg';
	import Header from '$lib/components/layout/Header.svelte';
	import Sprite from '$lib/components/icon/Sprite.svelte';

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

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

<main class=" ">
	{@render children()}
</main>


<style>
    /* 确保整个应用容器占满整个视口 */
    .app-container {
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden; /* 防止滚动条出现在侧边栏和主内容之间 */
				padding-top: 30px;
    }

    /* 主内容区域占据剩余空间 */
    .main-content {
        flex: 1; /* 占据 Flex 容器的剩余空间 */
        /* 允许主内容区域内部滚动 */
        overflow-y: auto;
        padding: 1rem;
    }
</style>
