diff --git a/src/assets/icons/bell-white.svg b/src/assets/icons/bell-white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e6a45e0c8bd5f0c5eff7d618ec56bed074f2cae1
--- /dev/null
+++ b/src/assets/icons/bell-white.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="white" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 459.334 459.334" xml:space="preserve" stroke="white">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <g> <path d="M175.216,404.514c-0.001,0.12-0.009,0.239-0.009,0.359c0,30.078,24.383,54.461,54.461,54.461 s54.461-24.383,54.461-54.461c0-0.12-0.008-0.239-0.009-0.359H175.216z"/> <path d="M403.549,336.438l-49.015-72.002c0-22.041,0-75.898,0-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485 C254.152,10.963,243.19,0,229.667,0s-24.485,10.963-24.485,24.485v27.663c-57.237,11.381-100.381,61.879-100.381,122.459 c0,23.716,0,76.084,0,89.83l-49.015,72.002c-5.163,7.584-5.709,17.401-1.419,25.511c4.29,8.11,12.712,13.182,21.887,13.182 H383.08c9.175,0,17.597-5.073,21.887-13.182C409.258,353.839,408.711,344.022,403.549,336.438z"/> </g> </g> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/assets/icons/bell.svg b/src/assets/icons/bell.svg
new file mode 100644
index 0000000000000000000000000000000000000000..93d55580e45e4dc3ef635603b0b62d3654953644
--- /dev/null
+++ b/src/assets/icons/bell.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 459.334 459.334" xml:space="preserve">
+<g>
+ <g>
+ <g>
+ <path d="M175.216,404.514c-0.001,0.12-0.009,0.239-0.009,0.359c0,30.078,24.383,54.461,54.461,54.461
+ s54.461-24.383,54.461-54.461c0-0.12-0.008-0.239-0.009-0.359H175.216z"/>
+ <path d="M403.549,336.438l-49.015-72.002c0-22.041,0-75.898,0-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485
+ C254.152,10.963,243.19,0,229.667,0s-24.485,10.963-24.485,24.485v27.663c-57.237,11.381-100.381,61.879-100.381,122.459
+ c0,23.716,0,76.084,0,89.83l-49.015,72.002c-5.163,7.584-5.709,17.401-1.419,25.511c4.29,8.11,12.712,13.182,21.887,13.182
+ H383.08c9.175,0,17.597-5.073,21.887-13.182C409.258,353.839,408.711,344.022,403.549,336.438z"/>
+ </g>
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index e63381b53b205198b75871d62f1bd48828d25819..e6ae7769327e0625aa91e675f5c8b73c783bf8af 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -28,6 +28,18 @@
<router-link class="nav-link text-white" :to="toStore()"><img
src="@/assets/icons/storefront.svg">Store</router-link>
</li>
+ <li class="nav-item dropdown">
+ <a class=" nav-link me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
+ role="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="fas fa-bell text-white"></i>
+ <span class="badge rounded-pill badge-notification bg-danger">1</span>
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+ <li v-for="index in notReadNotification" :key="index">
+ <a class="not-item dropdown-item text-white" href="#">{{index}}</a>
+ </li>
+ </ul>
+ </li>
<li v-if="userStore.isLoggedIn" class="nav-item dropdown">
<a class="nav-link dropdown-toggle username-text text-white " href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
@@ -60,11 +72,49 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
+import {ref} from "vue";
+
+
const router = useRouter();
const userStore : any = useUserInfoStore();
+//Hashmap that contains the path to the Badges, The Friend, The dashboard etc.
+//The key value pair is the message of the notification and the path of the route
+let messagePath = new Map<string, string>();
+let notifMap = new Map<number, Map<string, string>>();
+let notifId = 0;
+
+
+let notReadNotification = ['You', 'Another news', 'Something else here'];
+let readNotification = []
+let isRead = ref(false)
+let counter = ref(0)
+
+/* id: 0 -> /roadmap
+ id: 1 -> /profile
+ id: 2 -> /friend
+ */
+
+
+
+function getNotification(){
+ //axios call
+ let response = ['#id', 'message', ]
+ messagePath.set(response[0], response[1])
+ notifMap.set(notifId,messagePath)
+ notReadNotification.push(response[1])
+}
+function toBadges(){
+
+}
+
+function removeNotification() {
+
+}
+
+
function toHome() {
return '/'
}
@@ -130,6 +180,9 @@ function toLogout() {
.nav-item:hover {
background-color: #2b6ac7;
}
+.not-item:hover {
+ background-color: #2b6ac7;
+}
.nav-item .dropdown {
display: flex;
@@ -153,6 +206,16 @@ function toLogout() {
right: -0.5rem;
}
+#notifyBtn {
+ background-color: #0A58CA;
+ border: #0A58CA;
+}
+
+#notifyBtn:hover {
+ background-color: #2b6ac7;
+ border: #2b6ac7;
+}
+
.dropdown-menu[data-bs-popper] {
left: auto;
}