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

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

<style>
	#mainContainer {
		display: grid;
		grid-template-columns: 25% 75%;
		height: 100vh;
	}
	#sidebar {
		grid-column: 1;
		height: calc(100vh - 1em);
		overflow: auto;
		overflow-wrap: break-word;
		margin: 0.5em;
		scrollbar-gutter: stable;
		overflow-y: scroll;
		scrollbar-width: thin;
	}

	#content {
		grid-column: 2;
		margin: 0.5em;
		margin-left: 0em;
	}
</style>
