initial commit

src/layouts/MainLayout.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header>
+      <q-toolbar class="border-black-bottom-med bg-white text-black">
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <!-- TODO: add link to git -->
+        <q-toolbar-title> Anno 1800 Production Chain Renderer </q-toolbar-title>
+
+        <q-icon name="lab la-github" color="black" size="2.2rem"></q-icon>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" bordered>
+      <q-list>
+        <q-item-label header> Navigation </q-item-label>
+
+        <EssentialLink
+          v-for="link in linksList"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import EssentialLink from 'components/EssentialLink.vue';
+import linksList from './data/linksList.json';
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>
+
+<style lang="scss">
+.border-black-bottom-med {
+  border-bottom: 0.15rem solid black;
+}
+</style>

src/layouts/data/linksList.json

@@ -0,0 +1,8 @@
+[
+  {
+    "title": "Home",
+    "caption": "Homepage",
+    "icon": "las la-home",
+    "link": "/"
+  }
+]