Initial commit.

src/layouts/MainLayout.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <q-toolbar-title>
+          Form Builder App
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+    >
+      <q-list>
+        <q-item-label
+          header
+        >
+          Navigation
+        </q-item-label>
+
+        <q-item clickable v-ripple :to="{ name: 'formList' }" exact>
+          <q-item-section avatar>
+            <q-icon name="list_alt" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Forms</q-item-label>
+            <q-item-label caption>View existing forms</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple :to="{ name: 'formCreate' }" exact>
+          <q-item-section avatar>
+            <q-icon name="add_circle_outline" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Create Form</q-item-label>
+            <q-item-label caption>Create a new form</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const leftDrawerOpen = ref(false)
+
+function toggleLeftDrawer () {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+</script>