From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 src_frontend/layout/Drawer.svelte | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src_frontend/layout/Drawer.svelte

(limited to 'src_frontend/layout/Drawer.svelte')

diff --git a/src_frontend/layout/Drawer.svelte b/src_frontend/layout/Drawer.svelte
new file mode 100644
index 0000000..abf41fd
--- /dev/null
+++ b/src_frontend/layout/Drawer.svelte
@@ -0,0 +1,38 @@
+<script>
+    import { location } from 'svelte-spa-router'	
+    import { slide } from 'svelte/transition';
+
+    export let open = true;
+
+    location.subscribe((value) => {
+        open = true;
+    });
+
+    function drawerInit(node) {
+        node.addEventListener("click", () => {
+            if (!open) { open = true; }
+        });
+    }
+</script>
+
+<style>
+    .drawer {
+        background-color: white;
+        position: absolute;
+        padding: var(--theme-padding);
+        height: calc(100% - var(--theme-phone-header-height));
+        width: 100%;
+        box-sizing: border-box;
+        bottom: 0;
+        border-radius: 30px 30px 0 0;
+        transition: height 1s ease;
+    }
+    .closed {
+        height: 20%;
+        overflow: hidden;
+    }
+</style>
+
+<div class="drawer" class:closed={!open} use:drawerInit transition:slide>
+    <slot></slot>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3

