--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/App.vue	Thu Nov 22 07:07:12 2018 +0100
@@ -0,0 +1,96 @@
+<template>
+    <div id="app" class="main">
+        <div v-if="isAuthenticated" class="d-flex flex-column userinterface">
+            <div class="topbar d-flex pt-3 mx-3">
+                <div class="mr-auto d-flex">
+                    <Sidebar :routeName="routeName"></Sidebar>
+                    <div class="d-flex flex-column" style="max-width: 600px;">
+                        <Search v-if="routeName == 'mainview'"></Search>
+                        <Contextbox v-if="routeName == 'mainview'"></Contextbox>
+                    </div>
+                </div>
+                <div class="ml-auto d-flex">
+                    <Pdftool v-if="routeName == 'mainview'"></Pdftool>
+                    <Layers v-if="routeName == 'mainview'"></Layers>
+                    <Identify v-if="routeName == 'mainview'"></Identify>
+                    <Toolbar v-if="routeName == 'mainview'"></Toolbar>
+                </div>
+            </div>
+            <div class="flex-fill"></div>
+            <div class="d-flex flex-row align-items-end">
+                <Surveys v-if="routeName == 'mainview'"></Surveys>
+                <Infobar v-if="routeName == 'mainview'"></Infobar>
+            </div>
+            <Zoom v-if="routeName == 'mainview'"></Zoom>
+        </div>
+        <div class="d-flex flex-column">
+            <router-view/>
+        </div>
+    </div>
+</template>
+
+<style lang="sass" scoped>
+.userinterface
+  position: absolute
+  top: 0
+  left: 0
+  height: 100vh
+  width: 100vw
+  z-index: 4
+  pointer-events: none
+
+.topbar
+  position: relative
+  z-index: 2
+
+#app
+  height: 100vh
+  width: 100vw
+  font-family: "Avenir", Helvetica, Arial, sans-serif
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  text-align: center
+  color: #2c3e50
+</style>
+
+<script>
+/*
+ * This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ * 
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ * 
+ * Copyright (C) 2018 by via donau 
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ * 
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  name: "app",
+  computed: {
+    ...mapState("user", ["isAuthenticated"]),
+    routeName() {
+      const routeName = this.$route.name;
+      return routeName;
+    }
+  },
+  components: {
+    Surveys: () => import("./map/fairway/Surveys"),
+    Infobar: () => import("./map/fairway/Infobar"),
+    Pdftool: () => import("./map/Pdftool"),
+    Zoom: () => import("./map/Zoom"),
+    Identify: () => import("./map/Identify"),
+    Layers: () => import("./map/layers/Layers"),
+    Sidebar: () => import("./Sidebar"),
+    Search: () => import("./map/Search"),
+    Contextbox: () => import("./map/Contextbox"),
+    Toolbar: () => import("./map/toolbar/Toolbar")
+  }
+};
+</script>