Improve UI further

src/lib/components/Hamburger.svelte

@@ -0,0 +1,44 @@
+<script>
+	export let open = false;
+</script>
+
+<button
+	class="text-white cursor-pointer border-none focus:outline-none"
+	class:open
+	on:click={() => (open = !open)}
+>
+	<svg width="32" height="24">
+		<line id="top" x1="0" y1="2" x2="32" y2="2" />
+		<line id="middle" x1="0" y1="12" x2="32" y2="12" />
+		<line id="bottom" x1="0" y1="22" x2="32" y2="22" />
+	</svg>
+</button>
+
+<style>
+	svg {
+		min-height: 24px;
+		transition: transform 0.3s ease-in-out;
+	}
+
+	svg line {
+		stroke: currentColor;
+		stroke-width: 3;
+		transition: transform 0.3s ease-in-out;
+	}
+
+	button {
+		z-index: 20;
+	}
+
+	.open #top {
+		transform: translate(6px, 0px) rotate(45deg);
+	}
+
+	.open #middle {
+		opacity: 0;
+	}
+
+	.open #bottom {
+		transform: translate(-12px, 9px) rotate(-45deg);
+	}
+</style>

src/routes/+page.svelte

@@ -5,6 +5,7 @@
 	import { onMount } from 'svelte';
 	import Select from 'svelte-select';
 	import { encrypt, encryptWithPassword } from '$lib/crypto';
+	import Hamburger from '$lib/components/Hamburger.svelte';
 
 	const initialConfig: PasteConfig = {
 		language: 'plaintext',
@@ -115,12 +116,7 @@
 
 	<button class="btn bg-amber-500 text-black text-lg px-4 py-1" on:click={save}>Save</button>
 
-	<button
-		class="btn bg-pink-500 text-black text-lg px-4 py-1"
-		on:click={() => (sidebarOpen = !sidebarOpen)}
-	>
-		H
-	</button>
+	<Hamburger bind:open={sidebarOpen} />
 </div>
 
 <div class="p-2 min-h-screen w-screen grid grid-cols-12 text-primary">
@@ -149,31 +145,33 @@
 		class:expanded={sidebarOpen}
 		id="sidebar"
 	>
-		<div class="flex flex-col items-center gap-4 ">
+		<div class="flex flex-col items-center gap-4">
 			<h1 class="text-4xl mb-5 max-sm:hidden"><a href="/">YABin</a></h1>
 
 			<button
-				class="btn bg-amber-500 text-black text-lg px-4 py-1 my-2 w-full max-sm:hidden"
+				class="btn bg-amber-500 text-black text-lg px-4 py-1 my-1 w-full max-sm:hidden"
 				title="{cmdKey}+S"
 				on:click={save}
 			>
 				Save
 			</button>
 
-			<button
-				class="btn underline underline-offset-4 py-1"
-				title="{cmdKey}+N"
-				on:click={() => goto('/')}
-			>
-				New
-			</button>
-			<button
-				class="btn underline underline-offset-4 px-2 py-1"
-				title="{cmdKey}+N"
-				on:click={() => goto('/info')}
-			>
-				Info
-			</button>
+			<div class="flex flex-row gap-4 mb-4 justify-center">
+				<button
+					class="btn underline underline-offset-4 py-1"
+					title="{cmdKey}+N"
+					on:click={() => goto('/')}
+				>
+					New
+				</button>
+				<button
+					class="btn underline underline-offset-4 px-2 py-1"
+					title="{cmdKey}+N"
+					on:click={() => goto('/info')}
+				>
+					Info
+				</button>
+			</div>
 
 			<Select
 				class="px-1 py-1"
@@ -201,6 +199,9 @@
 				disabled={!config.encrypted}
 				bind:value={password}
 			/>
+			<small class="text-center text-xs hidden" class:hidden={config.encrypted}>
+				Need to enable encryption to use a password
+			</small>
 
 			<div>
 				<label for="burn" class="py-1">Burn after read?</label>