diff options
author | Jakob Stendahl <jakob.stendahl@outlook.com> | 2021-09-19 19:43:11 +0200 |
---|---|---|
committer | Jakob Stendahl <jakob.stendahl@outlook.com> | 2021-09-19 19:43:11 +0200 |
commit | 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 (patch) | |
tree | b7ad3f1cca92e2dfd2664ae9e65652bd03ff58b2 /src_frontend/layout/Drawer.svelte | |
parent | e6880cd8ccf82d993f222cb14b4860581654acb8 (diff) | |
download | Luxcena-Neo-7bdce37fd3f18e2712e18c4e2c64cac69af0aca1.tar.gz Luxcena-Neo-7bdce37fd3f18e2712e18c4e2c64cac69af0aca1.zip |
:boom: Introduce new UI based on svelte, and rewrite a lot of the node app and the NeoRuntime
Diffstat (limited to 'src_frontend/layout/Drawer.svelte')
-rw-r--r-- | src_frontend/layout/Drawer.svelte | 38 |
1 files changed, 38 insertions, 0 deletions
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 |