From 3adadd4b9ddfac00d9eb4c3694c673f4e8b85101 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 14:54:10 -0500
Subject: [PATCH] added Editor layout

---
 src/pages/Editor.vue | 58 +++++++++++++++++++++++++++++++++-----------
 src/router.ts        |  3 ++-
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 15a27cc..7a45dee 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,21 +1,51 @@
-<script setup lang="ts">
-import WrapperBox from '../components/WrapperBox.vue';
-
-</script>
-
 <template>
+  <q-layout view="hHh Lpr fff">
+    <q-header reveal bordered class="bg-primary text-white" height-hint="98">
+      <q-toolbar>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
 
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+          </q-avatar>
+          Title
+        </q-toolbar-title>
+      </q-toolbar>
+      <q-tabs align="left">
+        <q-route-tab to="/Scratch" label="Scratch" />
+        <q-route-tab to="/Editor" label="Editor" />
+      </q-tabs>
+    </q-header>
 
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
+    variables
+    <q-separator />
+    function
+ <!-- drawer content -->
+    </q-drawer>
+
+    <q-page-container> 
     <WrapperBox/>
-    <Draggable>
-    <div class="box">
 
-    <q-btn
-        color="primary"
-        label="Show another notification"
-        />
-    </div>
-  </Draggable>
+    </q-page-container>
+
+    <q-footer reveal elevated class="bg-grey-8 text-white">
+      <q-toolbar>
+        <q-toolbar-title>
+          <div>Status</div>
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-footer>
+  </q-layout>
 </template>
 
-<style></style>
+<script setup lang="ts">
+import { ref } from "vue";
+import WrapperBox from "../components/WrapperBox.vue";
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>
diff --git a/src/router.ts b/src/router.ts
index e0a2ff8..aaf3d4f 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -15,8 +15,9 @@ const routes = [
     {
         path: '/editor',
         name: 'Editor',
-        component: () => import('./pages/Editor.vue'),
+        component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
     },
+
 ]
 
 const router = createRouter({