flaschengeist-frontend/src/layouts/MainLayout.vue

<template>
  <q-layout view="hHh lpr lFf">

    <q-header
      elevated
      class="bg-primary text-white"
    >
      <q-toolbar>
        <q-btn
          dense
          flat
          round
          icon="menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          <span class="gt-xs">
            Flaschengeist
          </span>
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer
      show-if-above
      v-model="leftDrawerOpen"
      side="left"
      bordered
    >
      <essential-link
        v-for="(link, index) in links"
        :key="index"
        :title="link.title"
        :link="link.link"
        :icon="link.icon"
      >

      </essential-link>

      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script lang="ts">
import EssentialLink from 'components/EssentialLink.vue';

import { defineComponent, ref } from '@vue/composition-api';

const links = [
  { title: 'home', icon: 'mdi-home' },
  { title: 'about', link: 'about', icon: 'mdi-information' },
];

export default defineComponent({
  name: 'MainLayout',
  components: { EssentialLink },
  setup() {
    const leftDrawerOpen = ref(true);

    return { leftDrawerOpen, links };
  },
});
</script>