Grobes Layout fertig

wurde Gefüllt mit Dummies für die Navigation.
Zeigt Loginpage und leitet einen weiter.
Design ist responsive.

src/components/navigation/PluginLinksAbout.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <essential-link
+      v-for="(link, index) in links"
+      :key="index"
+      :title="link.title"
+      :link="link.link"
+      :icon="link.icon"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+const links = [
+  { title: 'Neues About', link: 'newAbout', icon: 'mdi-information-outline' },
+  { title: 'Altes About', link: 'oldAbout', icon: 'mdi-information-variant' }
+];
+
+import { defineComponent } from '@vue/composition-api';
+import EssentialLink from 'components/navigation/EssentialLink.vue';
+export default defineComponent({
+  // name: 'ComponentName'
+  components: { EssentialLink },
+  setup() {
+    return { links };
+  }
+});
+</script>

src/components/navigation/PluginLinksHome.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <essential-link
+      v-for="(link, index) in links"
+      :key="index"
+      :title="link.title"
+      :link="link.link"
+      :icon="link.icon"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+const links = [
+  { title: 'Neues Home', link: 'newHome', icon: 'mdi-google-home' },
+  { title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
+];
+import { defineComponent } from '@vue/composition-api';
+import EssentialLink from 'components/navigation/EssentialLink.vue';
+export default defineComponent({
+  // name: 'ComponentName'
+  components: { EssentialLink },
+  setup() {
+    return { links };
+  }
+});
+</script>

src/layouts/MainLayout.vue

@@ -1,27 +1,38 @@
 <template>
   <q-layout view="hHh lpr lFf">
-
-    <q-header
-      elevated
-      class="bg-primary text-white"
-    >
+    <q-header elevated class="bg-primary text-white">
       <q-toolbar>
+        <!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
         <q-btn
           dense
           flat
           round
           icon="menu"
           @click="leftDrawerOpen = !leftDrawerOpen"
+          v-if="!leftDrawerOpen"
         />
 
         <q-toolbar-title>
           <q-avatar>
-            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
+            <img src="logo.svg" />
           </q-avatar>
           <span class="gt-xs">
             Flaschengeist
           </span>
         </q-toolbar-title>
+
+        <!-- Hier kommen die Shortlinks hin -->
+        <div>
+          <q-btn flat round dense icon="sim_card" />
+          <q-btn flat round dense icon="gamepad" />
+        </div>
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-exit-to-app"
+          @click="$router.push({ name: 'login' })"
+        />
       </q-toolbar>
     </q-header>
 
@@ -30,44 +41,73 @@
       v-model="leftDrawerOpen"
       side="left"
       bordered
+      :mini="leftDrawerMini"
+      @click.capture="leftDrawerClicker"
     >
-      <essential-link
-        v-for="(link, index) in links"
-        :key="index"
-        :title="link.title"
-        :link="link.link"
-        :icon="link.icon"
-      >
+      <!-- Plugins -->
+      <q-list>
+        <essential-link
+          v-for="(link, index) in links"
+          :key="index"
+          :title="link.title"
+          :link="link.link"
+          :icon="link.icon"
+        />
+      </q-list>
+      <q-separator />
 
-      </essential-link>
+      <!-- Plugin functions -->
+      <router-view name="plugin-nav" />
 
-      <!-- drawer content -->
+      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
+        <q-btn
+          size="sm"
+          dense
+          round
+          unelevated
+          color="secondary"
+          icon="chevron_left"
+          @click="leftDrawerMini = true"
+        />
+      </div>
     </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';
+import EssentialLink from 'components/navigation/EssentialLink.vue';
+import { event, Screen } from 'quasar';
+import { defineComponent, ref, reactive, computed } from '@vue/composition-api';
 
 const links = [
   { title: 'home', icon: 'mdi-home' },
-  { title: 'about', link: 'about', icon: 'mdi-information' },
+  { title: 'about', link: 'about', icon: 'mdi-information' }
 ];
 
 export default defineComponent({
   name: 'MainLayout',
   components: { EssentialLink },
   setup() {
-    const leftDrawerOpen = ref(true);
+    const leftDrawer = ref(false);
 
-    return { leftDrawerOpen, links };
-  },
+    const leftDrawerOpen = ref(
+      computed({
+        get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
+        set: (val: boolean) => (leftDrawer.value = val)
+      })
+    );
+    const leftDrawerMini = ref(false);
+    function leftDrawerClicker() {
+      if (leftDrawerMini.value) {
+        leftDrawerMini.value = false;
+      }
+    }
+
+    return { leftDrawerOpen, leftDrawerMini, leftDrawerClicker, links };
+  }
 });
 </script>

src/layouts/OutLayout.vue

@@ -0,0 +1,41 @@
+<template>
+  <q-layout view="hHh lpr lFf"> <!-- Be sure to play with the Layout demo on docs -->
+
+    <!-- (Optional) The Header -->
+    <q-header elevated>
+      <q-toolbar>
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="logo.svg">
+          </q-avatar>
+          <span class="gt-xs">
+            Flaschengeist
+          </span>
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <!-- (Optional) The Footer -->
+
+
+    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
+
+
+    <q-page-container>
+      <!-- This is where pages get injected -->
+      <router-view />
+    </q-page-container>
+
+  </q-layout>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api'
+export default defineComponent({
+  name: 'OutLayout',
+
+  setup() {
+    return { }
+  }
+})
+</script>

src/pages/Login.vue

@@ -0,0 +1,56 @@
+<template>
+  <q-page padding class="fit row  justify-center items-center content-center">
+    <q-card
+      class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
+    >
+      <q-toolbar class="bg-primary text-white">
+        <q-toolbar-title>
+          Login
+        </q-toolbar-title>
+      </q-toolbar>
+
+      <q-card-section>
+        <q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
+          <q-input
+            filled
+            v-model="username"
+            label="Benutzername oder E-Mail"
+            :rules="rules"
+          />
+          <q-input
+            filled
+            v-model="password"
+            type="password"
+            label="Password"
+            :rules="rules"
+          />
+          <div class="row justify-end">
+            <q-btn label="Login" type="submit" color="primary" />
+          </div>
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+
+export default defineComponent({
+  // name: 'PageName'
+  setup() {
+    const username = ref('');
+    const password = ref('');
+    const rules = [
+      (val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'
+    ];
+
+    function doLogin() {
+      console.log(username.value, password.value);
+      this.$router.push({ name: 'home' });
+    }
+
+    return { username, password, doLogin, rules };
+  }
+});
+</script>

src/pages/about/About.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-page padding class="fit row justify-center content-center items-center">
+    <q-card class="col-4" height="" v-if="$route.name == 'about'">
+      <q-card-section>
+        About
+      </q-card-section>
+    </q-card>
+    <router-view />
+  </q-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  // name: 'PageName'
+});
+</script>

src/pages/about/NewAbout.vue

@@ -1,13 +1,14 @@
 <template>
-  <h1>Hello Bla blab blablelmewafjanfökawfd</h1>
+  <q-card class="col-4" height="">
+    <q-card-section>
+      Neues About
+    </q-card-section>
+  </q-card>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
 export default defineComponent({
-  name: 'about',
+  // name: 'PageName'
 });
 </script>
-
-<style>
-</style>

src/pages/about/OldAbout.vue

@@ -0,0 +1,14 @@
+<template>
+  <q-card class="col-4" height="">
+    <q-card-section>
+      Altes About
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  // name: 'PageName'
+});
+</script>

src/pages/home/Home.vue

@@ -0,0 +1,18 @@
+<template>
+  <q-page padding class="fit row justify-center content-center items-center">
+    <q-card class="col-4" height="" v-if="$route.name == 'home'">
+      <q-card-section>
+        Home
+      </q-card-section>
+    </q-card>
+    <router-view />
+  </q-page>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import {} from '';
+export default defineComponent({
+  // name: 'PageName'
+});
+</script>

src/pages/home/NewHome.vue

@@ -0,0 +1,14 @@
+<template>
+  <q-card class="col-4" height="">
+    <q-card-section>
+      Neues Zuhause
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  // name: 'PageName'
+});
+</script>

src/pages/home/OldHome.vue

@@ -0,0 +1,14 @@
+<template>
+  <q-card class="col-4" height="">
+    <q-card-section>
+      Altes Zuhause
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  // name: 'PageName'
+});
+</script>

src/router/routes.ts

@@ -3,11 +3,62 @@ import { RouteConfig } from 'vue-router';
 const routes: RouteConfig[] = [
   {
     path: '/',
+    redirect: 'login',
+    component: () => import('layouts/OutLayout.vue'),
+    children: [
+      {
+        name: 'login',
+        path: 'login',
+        component: () => import('pages/Login.vue')
+      }
+    ]
+  },
+  {
+    path: '/main',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { name: 'home', path: '', component: () => import('pages/Index.vue') },
-      { name: 'about', path: 'about', component: () => import('pages/About.vue') }
-
+      {
+        name: 'home',
+        path: 'home',
+        components: {
+          default: () => import('pages/home/Home.vue'),
+          'plugin-nav': () =>
+            import('components/navigation/PluginLinksHome.vue')
+        },
+        children: [
+          {
+            name: 'newHome',
+            path: 'newHome',
+            component: () => import('pages/home/NewHome.vue')
+          },
+          {
+            name: 'oldHome',
+            path: 'oldHome',
+            component: () => import('pages/home/OldHome.vue')
+          }
+        ]
+      },
+      {
+        name: 'about',
+        path: 'about',
+        components: {
+          default: () => import('pages/about/About.vue'),
+          'plugin-nav': () =>
+            import('components/navigation/PluginLinksAbout.vue')
+        },
+        children: [
+          {
+            name: 'newAbout',
+            path: 'newAbout',
+            component: () => import('pages/about/NewAbout.vue')
+          },
+          {
+            name: 'oldAbout',
+            path: 'oldAbout',
+            component: () => import('pages/about/OldAbout.vue')
+          }
+        ]
+      }
     ]
   },
 
@@ -15,6 +66,7 @@ const routes: RouteConfig[] = [
   // but you can also remove it
   {
     path: '*',
+    redirect: 'login',
     component: () => import('pages/Error404.vue')
   }
 ];