added Editor layout

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>

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({