diff --git a/src/App.vue b/src/App.vue
index 98240aef8109abb6b658cd4d7c5cd21106cb354e..92ede030b9b5c47a3f4aeec86c1c578464e12f26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,22 @@
<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
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 29b7bfe4369a7b0814cd286c5b588e0cd60d62aa..4ca942e95518328dbd676a222c03804175e93dd2 100644
--- a/src/components/HelloWorld.vue
+++ b/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>
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 9d8afb4563c0f7c182fad24eda2b40016abbd784..e4b0c39207cd58cdc20c68281aee6c505519b012 100644
--- a/src/components/LoginForm.vue
+++ b/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");
}
diff --git a/src/components/MessagesForm.vue b/src/components/MessagesForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c68c2f297cfd7e9b8695f64a51f0796b221ce85
--- /dev/null
+++ b/src/components/MessagesForm.vue
@@ -0,0 +1,13 @@
+<template>
+ <div> This is a message page</div>
+</template>
+
+<script>
+export default {
+ name: "MessagesForm"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..978e645fefa885e1dfe8fe775303d6ce7ce98983
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,65 @@
+<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
diff --git a/src/components/NotificationsForm.vue b/src/components/NotificationsForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..27879f0e9b0fde81f074647cbbc6c9a7092c936d
--- /dev/null
+++ b/src/components/NotificationsForm.vue
@@ -0,0 +1,13 @@
+<template>
+<div> This is a notification page</div>
+</template>
+
+<script>
+export default {
+ name: "NotificationsForm"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 44952f13e32ea6a00b992f9b4465bc80a84569b0..d052c3a23fdef7196c724765a9e11c455b6960d9 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 3fa28070de24f2055171ca2e20543881cb7fdf1c..4a2673ce0bceb9e56c7cfee50dd763d5cdea5a42 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,5 +1,16 @@
<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>
diff --git a/src/views/MessagesView.vue b/src/views/MessagesView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa142ea393224af5cb333962dbe5409a7369efa1
--- /dev/null
+++ b/src/views/MessagesView.vue
@@ -0,0 +1,20 @@
+<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
diff --git a/src/views/NavBarView.vue b/src/views/NavBarView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87cd3356817b60ec39f69198607c4ed0401ba040
--- /dev/null
+++ b/src/views/NavBarView.vue
@@ -0,0 +1,19 @@
+<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
diff --git a/src/views/NotificationView.vue b/src/views/NotificationView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..110413201cc8b65b19a1a2e3dd252ce93f0aa2de
--- /dev/null
+++ b/src/views/NotificationView.vue
@@ -0,0 +1,20 @@
+<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