3 files changed, 136 insertions, 0 deletions
diff --git a/src_frontend/layout/Desktop.svelte b/src_frontend/layout/Desktop.svelte
new file mode 100644
index 0000000..e90a4a2
--- /dev/null
+++ b/src_frontend/layout/Desktop.svelte
@@ -0,0 +1,48 @@
+<script>
+    import ControlComponents from "../Components/MainControls/ControlComponents.svelte";
+    import MainMenu from "../Components/MainMenu.svelte";
+    import NotifsWrapper from "../Components/Notifs/NotifsWrapper.svelte";
+</script>
+
+<style>
+    .controls {
+        background-color: white;
+        position: fixed;
+        width: 300px;
+        padding: 15px;
+        left: 50px;
+        top: 50px;
+        bottom: 50px;
+
+        overflow: auto;
+        border-radius: 15px;
+        max-height: 500px;
+    }
+
+    @media (min-height: 600px) {
+        .controls {
+            height: 500px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+
+    .content {
+        margin-left: 400px;
+        height: 100%;
+        overflow: auto;
+        margin-top: 35px;
+        margin-bottom: 15px;
+        margin-right: 185px;
+        padding: 15px;
+    }
+</style>
+
+<NotifsWrapper />
+<div>
+    <MainMenu />
+    <div class="controls drop-shadow"><ControlComponents /></div>
+    <div class="content">
+        <slot></slot>
+    </div>
+</div>
+\ No newline at end of file
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
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