From 2ebcb7369703a31568c7400e1efb7726ddf379f7 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sun, 14 May 2023 21:40:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=AA=20Adds=20sidebar=20skeleton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/App.svelte                |  2 ++
 app/src/components/Sidebar.svelte | 30 ++++++++++++++++++++++++++++++
 app/src/lib/store.ts              |  2 ++
 3 files changed, 34 insertions(+)
 create mode 100644 app/src/components/Sidebar.svelte

diff --git a/app/src/App.svelte b/app/src/App.svelte
index fc94b2f..afaa79c 100644
--- a/app/src/App.svelte
+++ b/app/src/App.svelte
@@ -5,6 +5,7 @@
 	import Stream from './components/Views/Stream.svelte';
 	import Controls from './components/Controls.svelte';
 	import location from './lib/location';
+	import Sidebar from './components/Sidebar.svelte';
 
 	onMount(() => {
 		connect(`ws://${location}`);
@@ -13,6 +14,7 @@
 
 <main class="w-screen h-screen">
 	<Topbar />
+	<Sidebar />
 	<div class="flex justify-center items-center w-full h-full">
 		<Stream />
 		<Controls />
diff --git a/app/src/components/Sidebar.svelte b/app/src/components/Sidebar.svelte
new file mode 100644
index 0000000..6919893
--- /dev/null
+++ b/app/src/components/Sidebar.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Icon, XMark, ChartBar, DevicePhoneMobile, Cog6Tooth } from 'svelte-hero-icons';
+	import { sidebarOpen } from '../lib/store';
+
+	const closeMenu = () => {
+		sidebarOpen.set(false);
+	};
+</script>
+
+<div
+	id="drawer-example"
+	style="background-color:#36393f"
+	class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform
+    {$sidebarOpen ? '' : '-translate-x-full'} bg-white w-40 dark:bg-gray-800"
+	tabindex="-1"
+	aria-labelledby="drawer-label"
+>
+	<button
+		type="button"
+		on:click={closeMenu}
+		class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+	>
+		<Icon src={XMark} size="32" />
+	</button>
+	<div class="h-full w-full flex flex-col justify-evenly items-center">
+		<button on:click={closeMenu}><Icon src={DevicePhoneMobile} size="32" /></button>
+		<button on:click={closeMenu}><Icon src={ChartBar} size="32" /></button>
+		<button on:click={closeMenu}><Icon src={Cog6Tooth} size="32" /></button>
+	</div>
+</div>
diff --git a/app/src/lib/store.ts b/app/src/lib/store.ts
index 6ffbb10..3ad2cbc 100644
--- a/app/src/lib/store.ts
+++ b/app/src/lib/store.ts
@@ -1 +1,3 @@
 import { writable } from 'svelte/store';
+
+export const sidebarOpen = writable(false);
\ No newline at end of file