Merge branch 'new_navbar' into 'main'

Navbar

See merge request !23

src/App.vue

 <template>
+  <div>
+  <NavBar />
   <router-view />
+  </div>
 </template>
+
+<script>
+import { defineComponent } from "vue";
+
+// Components
+
+import NavBar from "./components/NavBar.vue";
+
+export default defineComponent({
+  name: "App",
+
+  components: {
+    NavBar,
+  },
+});
+</script>
\ No newline at end of file

src/components/HelloWorld.vue

@@ -5,6 +5,9 @@
     <router-link to="/register" class="m-6">Registrer deg</router-link>
 
     <router-link to="/about" class="m-6">Om BoCo</router-link>
+
+<div @click="logout" class="m-6 cursor-pointer"><p>Logout</p></div>
+
   </div>
 </template>
 
@@ -13,5 +16,11 @@ export default {
   name: "HelloWorld",
 
   data: () => ({}),
+
+  methods: {
+    logout (){
+      this.$store.commit("logout");
+    },
+  }
 };
 </script>

src/components/LoginForm.vue

@@ -165,7 +165,7 @@ export default {
         console.log(user);
         let id = user.accountId;
         console.log(id);
-        this.$router.push("/profile/" + id);
+        await this.$router.push("/profile/" + id);
       } else {
         console.log("Something went wrong");
       }

src/components/MessagesForm.vue

+<template>
+  <div> This is a message page</div>
+</template>
+
+<script>
+export default {
+  name: "MessagesForm"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/NavBar.vue

+<template>
+  <nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
+    <div class="logo">
+      <img class="ml-4 cursor-pointer h-16 " src="../assets/logo3.svg" alt="BoCo logo" @click="$router.push('/')"/>
+    </div>
+    <ul class="flex">
+      <li>
+        <div class="text-black mr-4 bg-gray-100 p-1 hover:bg-gray-600 transition-all rounded" @click="loadMessages">Meldinger</div>
+      </li>
+      <li>
+        <div class="text-black mr-4 bg-gray-100 p-1 hover:bg-gray-600 transition-all rounded" @click="loadNotifications">Varsler</div>
+      </li>
+      <li>
+        <div class="text-black mr-4 bg-gray-100 p-1 hover:bg-gray-600 transition-all rounded" @click="loadProfile">Profil</div>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import {parseUserFromToken} from "@/utils/token-utils";
+
+export default {
+  name: "NavBar.vue",
+
+  methods: {
+    async loadMessages(){
+      if(this.$store.state.user.token !== null){
+        await this.$router.push("/messages")
+      }
+      else {
+        await this.$router.push("/login");
+      }
+
+    },
+    async loadNotifications(){
+      if(this.$store.state.user.token !== null){
+        await this.$router.push("/notifications")
+      }
+      else {
+        await this.$router.push("/login");
+      }
+
+    },
+    async loadProfile() {
+      if(this.$store.state.user.token !== null){
+      let user = parseUserFromToken(this.$store.state.user.token);
+      console.log(user);
+      let id = user.accountId;
+      console.log(id);
+      await this.$router.push("/profile/" + id);
+      }
+      else {
+        await this.$router.push("/login");
+      }
+    }
+  }
+}
+
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/NotificationsForm.vue

+<template>
+<div> This is a notification page</div>
+</template>
+
+<script>
+export default {
+  name: "NotificationsForm"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/router/index.js

@@ -4,6 +4,7 @@ import HomeView from "../views/HomeView.vue";
 import LoginView from "../views/LoginView.vue";
 import NewPasswordView from "../views/NewPasswordView";
 
+
 const routes = [
   {
     path: "/", //Endre før push
@@ -57,6 +58,17 @@ const routes = [
     name: "addNewItem",
     component: () => import("../views/AddNewItemView.vue"),
   },
+  {
+    path: "/notifications",
+    name: "notifications",
+    component: () => import("../views/NotificationView.vue"),
+  },
+  {
+    path: "/messages",
+    name: "messages",
+    component: () => import("../views/MessagesView.vue"),
+  },
+
 ];
 
 const router = createRouter({

src/views/AboutView.vue

 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+  <div>This is an about page</div>
 </template>
+
+<script>
+import { defineComponent } from "vue";
+
+// Components
+
+export default defineComponent({
+  name: "HomeView",
+
+  components: {
+  },
+});
+</script>

src/views/MessagesView.vue

+<template>
+  <div>
+    <MessagesForm/>
+  </div>
+</template>
+
+<script>
+import MessagesForm from "@/components/MessagesForm";
+
+export default {
+  name: "MessagesView.vue",
+  components: {
+    MessagesForm
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/NavBarView.vue

+<template>
+<div>
+  <Navbar/>
+</div>
+</template>
+
+<script>
+import Navbar from "@/components/NavBar";
+export default {
+  name: "NavBarView",
+  components:{
+    Navbar,
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/NotificationView.vue

+<template>
+  <div>
+    <NotificationsForm/>
+  </div>
+</template>
+
+<script>
+import NotificationsForm from "@/components/NotificationsForm";
+
+export default {
+  name: "NotificationView.vue",
+  components: {
+    NotificationsForm
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file