<script>
	import Sidebar from './Sidebar.svelte';
	import Footer from './Footer.svelte';
	export let data;
</script>

<div id="mainContainer">
	<div id="sidebar" class="panel"><Sidebar streams={data.streams} /></div>
	<div id="footer" class="panel-alt"><Footer /></div>
	<div id="content"><slot /></div>
</div>

<style>
	#mainContainer {
		display: grid;
		grid-template-columns: 25% 1fr;
		grid-template-rows: minmax(0, 1fr) auto;
		height: calc(100vh - 1em); /* fallback */
		height: calc(100dvh - 1em);
		gap: 0.5em;
		margin: 0.5em;
	}

	#footer {
		grid-row: 2;
		grid-column: 1;
		height: 100%;
		scrollbar-width: thin;
	}

	#sidebar {
		grid-row: 1;
		grid-column: 1;
		overflow-wrap: break-word;
		scrollbar-gutter: stable;
		overflow-y: scroll;
		scrollbar-width: thin;
	}

	#content {
		grid-row: 1 / 2;
		grid-column: 2;
		height: calc(100vh - 1em);
		height: calc(100dvh - 1em);
	}

	@media (max-width: 575px) {
		#mainContainer {
			grid-template-columns: 100%;
			grid-template-rows: 65% 1fr auto;
		}

		#footer {
			order: 2;
			order: 2;
			grid-row: 3;
			height: 100%;
		}

		#sidebar {
			order: 1;
			grid-row: 2;
			height: 100%;
		}

		#content {
			order: 0;
			grid-row: 1;
			grid-column: 1;
			height: 100%;
		}
	}
</style>
