started the nest creation

src/components/LeftMenu.component.vue

@@ -9,10 +9,7 @@
       <ion-content padding>
         <ion-list>
           <ion-item v-for="menu in menuItems" v-bind:key="menu.title" @click="openMenuEntry(menu)">
-              <v-icon
+            <v-icon class="black--text margin-right">{{ menu.icon }}</v-icon>
-                class="black--text mr-2"
-              >{{ menu.icon }}
-              </v-icon>
             <ion-label>{{ menu.title }}</ion-label>
           </ion-item>
         </ion-list>
@@ -29,22 +26,24 @@
 
 @Component({})
 export default class LeftMenuComponent extends Vue {
-
   public menuItems: any[] = [];
 
   @GlobalStore.Mutation('saveHeaderTitle')
   private saveHeaderTitle!: (title: string) => void;
 
   public created() {
-      this.menuItems = [{
+    this.menuItems = [
+      {
         title: 'Übersicht',
         icon: 'mdi-map',
         router: 'mapOverview'
-      }, {
+      },
+      {
         title: 'Gelege hinzufügen',
         icon: 'mdi-plus',
         router: 'createDataSet'
-      }];
+      }
+    ];
   }
 
   public openMenuEntry(menu: any) {
@@ -52,10 +51,11 @@
     this.$router.push({ name: menu.router });
     document.querySelector('ion-menu-controller')!.close('start');
   }
-
+}
-  };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
+.margin-right {
+  margin-right: 10px;
+}
 </style>

src/components/nest/CreateDataSet.component.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <v-row class="center d-flex flex-column ma-3">
+      <v-col class="ma-0 pa-0">
+        <v-label>Tierart</v-label>
+        <v-select :items="items" label="Tierart" dense solo></v-select>
+      </v-col>
+    </v-row>
+    <v-row class="center d-flex flex-column ma-3">
+      <v-col class="ma-0 pa-0">
+        <v-label>Anzahl der Eier</v-label>
+        <v-select :items="items" label="Anzahl der Eier" dense solo></v-select>
+      </v-col>
+    </v-row>
+    <v-row class="center d-flex flex-column ma-3">
+      <v-col class="ma-0 pa-0">
+        <v-label>Status</v-label>
+        <v-select :items="items" label="Status" dense solo></v-select>
+      </v-col>
+    </v-row>
+    <v-row class="center d-flex flex-column ma-3">
+      <v-col class="ma-0 pa-0">
+        <v-label>Schlüpft am</v-label>
+        <v-select :items="items" label="Schlüpft am" dense solo></v-select>
+      </v-col>
+    </v-row>
+    <v-row class="center d-flex flex-column ma-3">
+      <v-col class="ma-0 pa-0">
+          <v-label>Bemerkung / Notiz</v-label>
+          <v-textarea></v-textarea>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class CreateDataSetComponent extends Vue {
+  public items: any[] = ['Vogel'];
+}
+</script>
+
+<style lang="scss">
+.v-select__slot {
+  label.v-label.theme--light {
+    padding-left: 5px !important;
+  }
+  .v-select__selection.v-select__selection--comma {
+    margin-left: 5px;
+  }
+}
+</style>

src/main.ts

@@ -5,7 +5,7 @@ import router from './router';
 import store from './store/store';
 import '@ionic/core/css/core.css';
 import '@ionic/core/css/ionic.bundle.css';
-import vuetify from '@/plugins/vuetify';
+import vuetify from '@/plugins/vuetify/vuetify';
 
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 

src/plugins/vuetify/defaultLight.ts

@@ -5,7 +5,7 @@
  * https://vuetifyjs.com/en/customization/theme#theme
  */
 export default {
-    // REIN light theme colors
+    // GELEGEAPP light theme colors
     'primary': '#33b370',
     'secondary': '#172B4D',
     'accent': '#00A252',

src/plugins/vuetify/vuetify.ts

@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+import defaultThemeLight from './defaultLight';
+
+// Translation provided by Vuetify (typescript)
+import de from 'vuetify/src/locale/de';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+    icons: {
+        iconfont: 'mdi', // default value
+    },
+    lang: {
+        locales: { de },
+        current: 'de',
+    },
+    theme: {
+        options: {
+            customProperties: true,
+        },
+        themes: {
+            light: defaultThemeLight,
+        },
+    },
+});

src/router/index.ts

@@ -8,8 +8,6 @@ import CreateDataSetView from '@/views/CreateDataSet.view.vue';
 import AuthGuard from "@/helpers/AuthGuard";
 import Router from 'vue-router';
 
-Vue.use(IonicVueRouter);
-
 // Handle NavigationDuplicated stack error:
 // https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378
 const originalPush = Router.prototype.push;

src/views/CreateDataSet.view.vue

@@ -1,15 +1,23 @@
 <template>
     <div class="app-content">
-
+      <create-data-set-component></create-data-set-component>
     </div>
 </template>
 
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
 
-  @Component({})
+  @Component({
+    components: {
+      CreateDataSetComponent: () => import(
+        /* webpackChunkName: "CreateDataSetComponent" */
+        '@/components/nest/CreateDataSet.component.vue')
+    }
+  })
   export default class CreateDataSetView extends Vue {
 
+    
+
   };
 </script>
 

src/views/Home.view.vue

@@ -4,7 +4,9 @@
       <ion-toolbar color="primary">
         <div class="d-flex">
           <div class="header-item text-left">
-            <ion-button @click="openLeftMenu">Menü</ion-button>
+            <v-btn @click="openLeftMenu" class="ma-2" icon color="white">
+              <v-icon>mdi-menu</v-icon>
+            </v-btn>
           </div>
           <div class="header-item d-flex align-center justify-center">{{ headerTitle }}</div>
           <div class="header-item"></div>
@@ -23,21 +25,17 @@
 
 @Component
 export default class HomeView extends Vue {
-
   @GlobalStore.Getter('headerTitle')
   public headerTitle!: string;
 
   public openLeftMenu() {
     document.querySelector('ion-menu-controller')!.open('start');
   }
-
 }
 </script>
 
 <style scoped>
-
 .header-item {
   flex-basis: 100%;
 }
-
 </style>