inital Quazar setup

src/App.vue

@@ -1,20 +1,38 @@
 <script setup lang="ts">
-import Home from './components/Home.vue'
+import Home from "./pages/Login.vue";
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-import { MathStatement } from './support/parse'
-import { MathPage } from './support/page'
-(window as any).Stmt = MathStatement
-;(window as any).Pg = MathPage
+import HelloWorld from "./components/HelloWorld.vue";
+import { MathStatement } from "./support/parse";
+import { MathPage } from "./support/page";
+import { ref } from "vue";
+
+(window as any).Stmt = MathStatement;
+(window as any).Pg = MathPage;
 </script>
 
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/scratch">Scratch Testing</router-link>
-  </div>
-  <router-view/>
+  <q-layout view="hHr LpR fFf">
+    <q-header elevated class="bg-primary text-white" height-hint="98">
+      <q-toolbar>
+        <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-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
 </template>
 
 <style>
@@ -26,5 +44,4 @@ import { MathPage } from './support/page'
   color: #2c3e50;
   margin-top: 60px;
 }
-
 </style>

src/main.ts

@@ -1,16 +1,55 @@
+/*
+--------------------------------------------------
+                    Vue Helpers
+--------------------------------------------------
+*/
 import { createApp } from 'vue'
-import App from './App.vue'
+
+import router from './router'
+
+/*
+--------------------------------------------------
+                    App UI
+--------------------------------------------------
+*/
+import { Quasar } from 'quasar'
+
+// Import icon libraries
+import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
+import '@quasar/extras/material-icons/material-icons.css'
+import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
+
+// A few examples for animations from Animate.css:
+// import @quasar/extras/animate/fadeIn.css
+// import @quasar/extras/animate/fadeOut.css
+
+// Import Quasar css
+import 'quasar/src/css/index.sass'
+
+/*
+--------------------------------------------------
+                    Plugins
+--------------------------------------------------
+*/
 import { DraggablePlugin } from '@braks/revue-draggable'
 import { createAuth0 } from '@auth0/auth0-vue'
-import router from './router'
 
 import 'katex/dist/katex.min.css'
 import 'katex/dist/contrib/auto-render.min'
 
-
+/*
+--------------------------------------------------
+                    Components
+--------------------------------------------------
+*/
+import App from './App.vue'
 
 const app = createApp(App)
 
+app.use(Quasar, {
+    plugins: {}, // import Quasar plugins and add here
+})
+
 app.use(
     createAuth0({
         domain: 'dev-ge84r-eu.us.auth0.com',

src/pages/Scratch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import {MathPage} from '../support/page'
   import {v4 as uuidv4} from 'uuid'
-  import Statement from './Statement.vue'
+  import Statement from '../components/Statement.vue'
   import {MathStatement} from '../support/parse'
 
   const page = new MathPage(uuidv4())

src/quasar-variables.sass

@@ -0,0 +1,10 @@
+$primary   : #1976D2
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$dark      : #1D1D1D
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037

src/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from './components/Home.vue'
+import Home from './pages/Login.vue'
 
 const routes = [
     {
@@ -10,7 +10,7 @@ const routes = [
     {
         path: '/scratch',
         name: 'Scratch',
-        component: () => import(/* webpackChunkName: "scratch" */ './components/Scratch.vue'),
+        component: () => import(/* webpackChunkName: "scratch" */ './pages/Scratch.vue'),
     },
 ]