From 3a13f71a0512505699d7764359bcbfcd5684d7e5 Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Tue, 1 Aug 2023 13:34:52 +0200
Subject: [PATCH] Add temp navbar

---
 src/lib/components/NavBar.svelte | 72 ++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte        | 15 +++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/lib/components/NavBar.svelte
 create mode 100644 src/routes/+layout.svelte

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
new file mode 100644
index 0000000..a03cf11
--- /dev/null
+++ b/src/lib/components/NavBar.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { colors } from '$lib/theme';
+	import Button from './Button.svelte';
+
+	let expanded = true;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+	let color = colors.secondaryColor;
+</script>
+
+{#if expanded}
+	<nav>
+		<div>
+			<h2>Mokuro</h2>
+			<Button variant="secondary" on:click={toggle}>Settings</Button>
+		</div>
+	</nav>
+{:else}
+	<button on:click={toggle} class="svg">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={color}
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line
+				x1="3"
+				y1="18"
+				x2="21"
+				y2="18"
+			/></svg
+		>
+	</button>
+{/if}
+
+<style>
+	nav {
+		position: relative;
+		width: 100%;
+		z-index: 1;
+	}
+	div {
+		display: flex;
+		flex: 1;
+		justify-content: space-between;
+		background-color: var(--primary-color);
+		padding: 0 10px 0 10px;
+		align-items: center;
+		z-index: 1;
+	}
+	.svg {
+		padding: 10px;
+		margin: 5px;
+		position: fixed;
+		border-radius: 2px;
+		z-index: 1;
+		right: 10px;
+	}
+
+	.svg:active {
+		background-color: var(--primary-accent-color);
+	}
+	svg {
+		z-index: 1;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..bb8dfe7
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import NavBar from '$lib/components/NavBar.svelte';
+	import '../app.css';
+</script>
+
+<NavBar />
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		padding: 10px;
+	}
+</style>