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/Phone.svelte | 50 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src_frontend/layout/Phone.svelte

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

diff --git a/src_frontend/layout/Phone.svelte b/src_frontend/layout/Phone.svelte
new file mode 100644
index 0000000..dc8d69a
--- /dev/null
+++ b/src_frontend/layout/Phone.svelte
@@ -0,0 +1,50 @@
+<script>
+    import NotifsWrapper from "../Components/Notifs/NotifsWrapper.svelte";
+    import MainMenu from "../Components/MainMenu.svelte";
+    import Drawer from "./Drawer.svelte";
+
+    let drawerOpen;
+
+    function toggleDrawer() {
+        drawerOpen = !drawerOpen;
+    }
+</script>
+
+<style>
+    main {
+        background-color: #3c3b3b;
+        height: 100%;
+        width: 100%;
+    }
+    .header {
+        position: fixed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: var(--theme-phone-header-height);
+        color: white;
+    }
+    .header > * {
+        margin: auto;
+    }
+    .header > div:first-child, .header > div:last-child {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+</style>
+
+<NotifsWrapper />
+<main>
+    <div class="header">
+        <div><!--<i class="fas fa-chevron-left"></i>--></div>
+        <div>Luxcena NEO</div>
+        <div on:click={toggleDrawer}><i class="fas fa-bars"></i></div>
+    </div>
+    <MainMenu />
+
+    <Drawer bind:open={drawerOpen}>
+        <slot></slot>
+    </Drawer>
+</main>
\ No newline at end of file
-- 
cgit v1.2.3

