setup of variables and function of notification

src/assets/icons/bell-white.svg

+<!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

src/assets/icons/bell.svg

+<?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

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;
 }