From 415f2d878017ac1e6d3759605487becde8baf05e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 2 Nov 2022 22:01:49 +0100
Subject: [PATCH] UX improvements

---
 .../lib/components/FlowPreviewContent.svelte   |  4 ----
 .../lib/components/common/drawer/Drawer.svelte | 18 ++++++++++++++++--
 frontend/src/routes/__layout@root.svelte       |  8 ++++----
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 5cabf85a4a..574c895ad9 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -77,10 +77,6 @@
 						runPreview($previewArgs)
 					}
 					break
-
-				case 'Escape':
-					dispatch('close')
-					break
 			}
 		}
 	}
diff --git a/frontend/src/lib/components/common/drawer/Drawer.svelte b/frontend/src/lib/components/common/drawer/Drawer.svelte
index f605cf6a03..a03dbad2e0 100644
--- a/frontend/src/lib/components/common/drawer/Drawer.svelte
+++ b/frontend/src/lib/components/common/drawer/Drawer.svelte
@@ -31,19 +31,33 @@
 		open = !open
 	}
 
+	function onKeyDown(event: KeyboardEvent) {
+		if (open) {
+			switch (event.key) {
+				case 'Escape':
+					open = false
+					break
+			}
+		}
+	}
+
 	$: open ? dispatch('open') : dispatch('close')
 
+	let timeout = true
+	$: !open ? setTimeout(() => (timeout = true), duration * 1000) : (timeout = false)
 	onMount(() => {
 		mounted = true
 		scrollLock(open)
 	})
 </script>
 
-<aside class="drawer" class:open {style}>
+<svelte:window on:keydown={onKeyDown} />
+
+<aside class="drawer" class:open class:close={!open} {style}>
 	<div class="overlay" on:click={handleClickAway} />
 
 	<div class="panel {placement}" class:size>
-		{#if open}
+		{#if open || !timeout}
 			<slot />
 		{/if}
 	</div>
diff --git a/frontend/src/routes/__layout@root.svelte b/frontend/src/routes/__layout@root.svelte
index 1be922b343..b274fd9e54 100644
--- a/frontend/src/routes/__layout@root.svelte
+++ b/frontend/src/routes/__layout@root.svelte
@@ -47,12 +47,12 @@
 		>
 			<div
 				class={classNames(
-					'fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity ease-linear duration-300',
-					menuOpen ? 'opacity-100' : 'opacity-0 '
+					'fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity ease-linear duration-300 z-40',
+					menuOpen ? 'opacity-100' : 'opacity-0'
 				)}
 			/>
 
-			<div class="fixed inset-0 flex">
+			<div class="fixed inset-0 flex z-40">
 				<div
 					class={classNames(
 						'relative flex-1 flex flex-col max-w-xs w-full bg-white transition ease-in-out duration-300 transform',
@@ -106,7 +106,7 @@
 
 		<div
 			class={classNames(
-				'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-10',
+				'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40',
 				isCollapsed ? 'md:w-12' : 'md:w-48'
 			)}
 		>