added the menu controller

src/App.vue

@@ -1,14 +1,35 @@
 <template>
   <div id="app">
-    <v-app>
+    <left-menu-component></left-menu-component>
+    <v-app id="content">
       <ion-app>
         <ion-vue-router/>
       </ion-app>
     </v-app>
+    <ion-menu-controller></ion-menu-controller>
   </div>
 </template>
 
+<script lang="ts">
+
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component({
+    components: {
+      LeftMenuComponent: () => import(
+        /* webpackChunkName: "LeftMenuComponent" */
+        '@/components/LeftMenu.component.vue')
+    }
+  })
+  export default class App extends Vue {
+
+
+  }
+
+</script>
+
 <style lang="scss">
+
   #app {
     font-family: "Avenir", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -47,4 +68,8 @@
     margin-left: 15px;
   }
 
+  .app-content {
+    height: 100vh;
+  }
+
 </style>

src/components/HelloWorld.vue

@@ -1,103 +0,0 @@
-<template>
-  <div>
-    <ion-page>
-      <ion-header>
-        <ion-toolbar color="primary">
-          <ion-title>Home</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <div
-          style="width:100%; height:100%;"
-          id="map"
-          name="map"
-        >
-        </div>
-      </ion-content>
-    </ion-page>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Map, tileLayer, marker, geoJSON, TileLayer, icon } from 'leaflet';
-import axios from 'axios';
-
-@Component({})
-export default class HelloWorld extends Vue {
-  public map?: Map;
-
-  public created() {
-    setTimeout(() => {
-      axios
-        .get('http://localhost:1337/area/json')
-        .then((response: any) => {
-          this.map = new Map('map').setView(
-            [53.15190499781906, 8.827171325683596],
-            14
-          );
-
-          const osm = new TileLayer(
-            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-            {
-              minZoom: 0,
-              maxZoom: 20,
-              attribution:
-                'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
-            }
-          );
-
-          this.map.on('click', (e: any) => {
-            console.log('Lat, Lon : ' + e.latlng.lat + ', ' + e.latlng.lng);
-          });
-
-          this.map.addLayer(osm);
-
-          var ccIcon = icon({
-            iconUrl: 'cc-logo-black.png',
-            iconSize: [35, 35],
-            iconAnchor: [17, 17],
-            popupAnchor: [0, -28]
-          });
-
-          const geo = geoJSON(response.data, {
-            // Marker Icon
-            pointToLayer: (feature, latlng) => {
-              return marker(latlng, { icon: ccIcon });
-            },
-            // Style
-            style: feature => {
-              if (feature!.properties.Color) {
-                return {
-                  fillColor: `#${feature!.properties.Color}`,
-                  color: `#${feature!.properties.Color}`,
-                  opacity: 1,
-                  fillOpacity: 0.8,
-                  width: 1
-                };
-              } else {
-                return { color: '#808080', width: 1 };
-              }
-            },
-            // Popup
-            onEachFeature: function(feature, layer) {
-              layer.bindPopup(
-                '<b>' +
-                  feature.properties.NUTZER +
-                  '</b><br />' +
-                  feature.properties.Flurstck
-              );
-            }
-          });
-          geo.addTo(this.map);
-        })
-        .catch((e: any) => {
-          console.log(e);
-        });
-    }, 2000);
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/components/LeftMenu.component.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+      <ion-menu side="start" content-id="content">
+        <ion-header>
+          <ion-toolbar color="primary">
+            <ion-title>Menü</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <ion-list>
+            <ion-item v-for="menu in menuItems" v-bind:key="menu.title" @click="openMenuEntry(menu)">
+              <v-icon
+                class="black--text mr-2"
+              >{{ menu.icon }}
+              </v-icon>
+              <ion-label>{{ menu.title }}</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>
+    </div>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+  import { namespace } from 'vuex-class';
+
+  const GlobalStore = namespace('global');
+
+  @Component({})
+  export default class LeftMenuComponent extends Vue {
+
+    public menuItems: any[] = [];
+
+    @GlobalStore.Mutation('saveHeaderTitle')
+    private saveHeaderTitle!: (title: string) => void;
+
+    public created() {
+      this.menuItems = [{
+        title: 'Übersicht',
+        icon: 'mdi-map',
+        router: 'mapOverview'
+      }, {
+        title: 'Gelege hinzufügen',
+        icon: 'mdi-plus',
+        router: 'createDataSet'
+      }];
+    }
+
+    public openMenuEntry(menu: any) {
+      this.saveHeaderTitle(menu.title);
+      this.$router.push({ name: menu.router });
+      document.querySelector('ion-menu-controller')!.close('start');
+    }
+
+  };
+</script>
+
+<style scoped>
+
+</style>

src/router/index.ts

@@ -4,6 +4,7 @@ import LoginView from "@/views/Login.view.vue";
 import HomeView from "@/views/Home.view.vue";
 import AreaSelectionView from "@/views/AreaSelection.view.vue";
 import MapOverviewView from "@/views/MapOverview.view.vue";
+import CreateDataSetView from '@/views/CreateDataSet.view.vue';
 import AuthGuard from "@/helpers/AuthGuard";
 import Router from 'vue-router';
 
@@ -43,6 +44,11 @@ export default new IonicVueRouter({
           path: 'mapOverview',
           name: 'mapOverview',
           component: MapOverviewView
+        },
+        {
+          path: 'createDataSet',
+          name: 'createDataSet',
+          component: CreateDataSetView
         }
       ]
     },

src/store/global.store.ts

@@ -2,6 +2,7 @@ import { ActionTree, Module } from 'vuex';
 
 const store = {
   selectedArea: undefined,
+  headerTitle: undefined
 };
 
 const actions: ActionTree<any, any> = {
@@ -10,11 +11,15 @@ const actions: ActionTree<any, any> = {
 const mutations = {
   saveArea: (state: any, area: any) => {
     state.selectedArea = area;
+  },
+  saveHeaderTitle: (state: any, title: string) => {
+    state.headerTitle = title;
   }
 };
 
 const getters = {
   selectedArea: (state: any) => state.selectedArea,
+  headerTitle: (state: any) => state.headerTitle
 };
 
 const globalStore: Module<any, any> = {

src/store/status.store.ts

@@ -26,8 +26,6 @@ const actions: ActionTree<any, any> = {
     Promise<any> => {
     const response = await statusRepository.getIcons(lastUpdate);
 
-    console.log(response);
-
     commit('saveIcons', response);
 
     return response;

src/views/CreateDataSet.view.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="app-content">
+
+    </div>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component({})
+  export default class CreateDataSetView extends Vue {
+
+  };
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Home.view.vue

@@ -1,18 +1,43 @@
 <template>
   <div>
-    <ion-vue-router/>
+    <ion-header>
+      <ion-toolbar color="primary">
+        <div class="d-flex">
+          <div class="header-item text-left">
+            <ion-button @click="openLeftMenu">Menü</ion-button>
+          </div>
+          <div class="header-item d-flex align-center justify-center">{{ headerTitle }}</div>
+          <div class="header-item"></div>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+    <router-view/>
   </div>
 </template>
 
 <script lang="ts">
-  import {Component, Vue} from "vue-property-decorator";
+  import { Component, Vue } from 'vue-property-decorator';
+  import { namespace } from 'vuex-class';
+
+  const GlobalStore = namespace('global');
 
   @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>

src/views/MapOverview.view.vue

@@ -1,19 +1,16 @@
 <template>
-  <ion-page>
+  <div class="app-content">
-    <ion-header>
+    <ion-content>
-      <ion-toolbar color="primary">
+      <div class="mapContainer" ref="mapContainer">
-        <ion-title>Home</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content padding>
         <div
           style="width:100%; height:100%;"
           id="map"
           name="map"
         >
         </div>
+      </div>
     </ion-content>
-  </ion-page>
+  </div>
 
 </template>
 
@@ -51,18 +48,22 @@
     public map?: Map | null;
 
     public async created() {
-      this.map = null;
 
+      // Small timeout before hot reloading the map. Needed for development!
+      setTimeout(this.initMap, 1000);
+    }
+
+    public async initMap() {
       const allIcons = await this.getAllIcons();
       const allStates = await this.getAllStates();
       const allNests = await this.getAllNests({ areaId: this.selectedArea.id! });
 
       const response = await this.getAreaGeoJson({ areaId: this.selectedArea.id! });
+
       this.map = new Map('map').setView(
         [53.15190499781906, 8.827171325683596],
         14
       );
-
       const osm = new TileLayer(
         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         {
@@ -79,13 +80,6 @@
 
       this.map.addLayer(osm);
 
-      const ccIcon = icon({
-        iconUrl: 'cc-logo-black.png',
-        iconSize: [35, 35],
-        iconAnchor: [17, 17],
-        popupAnchor: [0, -28]
-      });
-
       const geo = geoJSON(response, {
         // Style
         style: (feature: any) => {
@@ -120,15 +114,22 @@
         const iconData = icon({
           iconUrl: base64icon,
           iconAnchor: [19, 19],
-          iconSize: [25, 25],
+          iconSize: [25, 25]
         });
         new Marker([nest.history[0].location.latitude,
           nest.history[0].location.longitude], { icon: iconData }).addTo(this.map!);
       });
     }
+
+    public destroyed() {
+      this.map!.off();
+      this.map!.remove();
+    }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
+  .mapContainer {
+    height: 100%;
+  }
 </style>