faszom

src/App.vue

@@ -1,32 +1,62 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+  <div id="app" v-if="$store.state.appReady">
+
+    <navbar/>
+
+    <div id="content">
+      <router-view/>
     </div>
-    <router-view/>
+
+    <div id="footer">
+      <footer-nav/>
+    </div>
+
+  </div>
+  <div id="app-loader" v-else>
+    <loading-screen/>
   </div>
 </template>
 
+<script>
+import FooterNav from "@/components/FooterNav";
+import Navbar from "@/components/Navbar";
+import LoadingScreen from "@/components/LoadingScreen";
+
+export default {
+  name: "Login",
+  components: {
+    Navbar,
+    FooterNav,
+    LoadingScreen
+  },
+  created() {
+    // The basic app is created... Currently showing a loading screen (as soon as mounted)
+    this.$store.dispatch('storeUserData','testuser').then(() => {
+      this.$store.dispatch('setAppReady');
+    });
+  }
+}
+</script>
+
 <style>
+#content {
+  margin-top: 70px;
+  margin-bottom: 20px;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
-#nav {
-  padding: 30px;
+#footer {
+  padding: 1em;
+  margin-top: auto;
+  background: #E9ECEF;
 }
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+#app-loader {
+  height: 100%;
 }
 </style>