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


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

<svelte:head>
	<link rel="icon" href={favicon} />
	<Sprite />
</svelte:head>
<Header/>
<div class="app-container">

	<!-- 1. 侧边栏: 固定宽度，全高 -->
	<Sidebar />
	<!-- 2. 主内容区域: 占据剩余所有空间 (flex-1) -->
	<main class="main-content">
		<!-- 渲染子路由的内容 (+page.svelte 或下级 +layout.svelte)
				 使用标准的 <slot /> 替换了 {@render children()} -->

		{@render children()}
	</main>
</div>

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

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