examples: add quasar example

examples/quasar/src/layouts/MainLayout.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import EssentialLink from 'components/EssentialLink.vue'
+
+const linksList = [
+  {
+    title: 'Flow customized',
+    caption: 'Vue Flow using quasar components',
+    icon: 'code',
+    link: '/',
+  },
+  {
+    title: 'Flow in a popup',
+    caption: 'Vue Flow in a popup',
+    icon: 'code',
+    link: '/popup',
+  },
+  {
+    title: 'Flow in a card',
+    caption: 'Vue Flow in a card',
+    icon: 'code',
+    link: '/card',
+  },
+]
+
+export default defineComponent({
+  name: 'MainLayout',
+
+  components: {
+    EssentialLink,
+  },
+
+  setup() {
+    const leftDrawerOpen = ref(false)
+
+    return {
+      essentialLinks: linksList,
+      leftDrawerOpen,
+      toggleLeftDrawer() {
+        leftDrawerOpen.value = !leftDrawerOpen.value
+      },
+    }
+  },
+})
+</script>
+
+<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> Quasar App </q-toolbar-title>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list>
+        <q-item-label header> Examples </q-item-label>
+
+        <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>