add links bar

src/routes/streams/+layout.svelte

@@ -1,10 +1,12 @@
 <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>
 
@@ -12,13 +14,22 @@
 	#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;
@@ -27,6 +38,7 @@
 	}
 
 	#content {
+		grid-row: 1 / 2;
 		grid-column: 2;
 		height: calc(100vh - 1em);
 		height: calc(100dvh - 1em);
@@ -35,15 +47,25 @@
 	@media (max-width: 575px) {
 		#mainContainer {
 			grid-template-columns: 100%;
-			grid-template-rows: 70% 1fr;
+			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%;
 		}