Add NavBar from figma

src/components/AppHeader.vue

@@ -1,48 +1,78 @@
-<script setup>
-import { reactive } from "vue";
-const user = reactive({
-    initials: "JD",
-    fullName: "John Doe",
-    email: "[email protected]",
-})
+<template>
+  <div class="navigation-container">
+    <div class="navigation-bar">
+      <div class="navigation-text text-wrapper-1">Education</div>
+      <div class="navigation-text text-wrapper-2">Event</div>
+      <div class="navigation-text text-wrapper-3">Lab</div>
+      <div class="navigation-text text-wrapper-4">Challenge</div>
+      <div class="navigation-text text-wrapper-5">Tour</div>
+      <div class="navigation-text text-wrapper-6">About</div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.navigation-container {
+  position: absolute;
+  background-color: #2f2f2fb2;
+  border: 2px solid;
+  top: 25px;
+  right: 25px;
+  border-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
+  height: 50px;
+  width: 750px;
+  z-index: 100;
 
-import {useAppStore} from '@/stores/app.js'
-const appStore = useAppStore()
+  .navigation-bar {
+    margin-top: 15px;
+    margin-left: 40px;
+    height: 25px;
+    position: relative;
+    width: 660px;
+    z-index: 101;
+  }
 
-</script>
+  .navigation-text {
+    color: rgba(158, 158, 158, 1);
+    font-family: "Gilroy", Helvetica;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 800;
+    height: 25px;
+    letter-spacing: 2px;
+    line-height: normal;
+    position: absolute;
+    text-align: right;
+    top: -1px;
+    transition: color 0.5s ease-out;
+    &:hover {
+      cursor: pointer;
+      color: white;
+    }
+  }
 
-<template>
-  <v-app-bar class="px-1">
-      <v-app-bar-nav-icon icon="mdi-menu" @click="appStore.changeOpenNav()"></v-app-bar-nav-icon>
-      <v-app-bar-title>Smorrery WebApp</v-app-bar-title>
-    <!-- <v-text-field prepend-icon="mdi-magnify" single-line></v-text-field> -->
+  .text-wrapper-1{
+    left: 0;
+  }
+  .text-wrapper-2 {
+    left: 155px;
+  }
 
-    <!-- <v-menu min-width="150px" rounded>
-      <template v-slot:activator="{ props }">
-        <v-btn icon v-bind="props">
-          <v-avatar color="brown" size="large">
-            <span class="text-h5">{{ user.initials }}</span>
-          </v-avatar>
-        </v-btn>
-      </template>
-      <v-card>
-        <v-card-text>
-          <div class="mx-auto text-center">
-            <v-avatar color="brown">
-              <span class="text-h5">{{ user.initials }}</span>
-            </v-avatar>
-            <h3>{{ user.fullName }}</h3>
-            <p class="text-caption mt-1">
-              {{ user.email }}
-            </p>
-            <v-divider class="my-3"></v-divider>
-            <v-btn rounded variant="text"> Edit Account </v-btn>
-            <v-divider class="my-3"></v-divider>
-            <v-btn rounded variant="text"> Disconnect </v-btn>
-          </div>
-        </v-card-text>
-      </v-card>
-    </v-menu> -->
-  </v-app-bar>
-</template>
+  .text-wrapper-3 {
+    left: 261px;
+  }
+
+  .text-wrapper-4 {
+    left: 345px;
+  }
+
+  .text-wrapper-5 {
+    left: 503px;
+  }
 
+  .text-wrapper-6 {
+    left: 594px;
+  }
+}
+</style>

src/components/AppHeaderLogo.vue

@@ -0,0 +1,2 @@
+<template>
+    </template>

src/layouts/default.vue

@@ -5,7 +5,7 @@
   <v-app>
     <v-main>
       <AppHeader />
-      <AppNavigation />
+      <!-- <AppNavigation /> -->
       <router-view />
     </v-main>