first commit

src/layouts/MainLayout.vue

@@ -0,0 +1,38 @@
+<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> Light Control </q-toolbar-title>
+
+        <div>Version 0.0.1</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list>
+        <q-item to="/" clickable v-ripple>
+          <q-item-section>Home</q-item-section>
+        </q-item>
+
+        <q-item to="/data" clickable v-ripple>
+          <q-item-section>Data</q-item-section>
+        </q-item>
+      </q-list>
+    </q-drawer>
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>