refactor(component)

refactored ButtonDisplayStreak placement

src/components/ButtonDisplayStreak.vue

 <template>
-    <div class="flex flex-col items-center absolute">
-        <span class="text-sm text-bold">STREAK</span>
+    <div class="flex flex-col items-center relative">
         <button
             @mouseover="display"
             @mouseleave="hide"
@@ -15,7 +14,7 @@
 
         <div
             v-if="displayStreakCard"
-            class="w-[30vh] h-[20vh] md:w-auto md:h-auto group z-50 bg-opacity-50 overflow-hidden absolute left-0 top-14 md:top-20 flex flex-col justify-evenly text-wrap"
+            class="w-[30vh] h-[20vh] md:w-auto md:h-auto group z-50 bg-opacity-50 overflow-hidden absolute   right-[-4rem] top-14 md:top-20 flex flex-col justify-evenly text-wrap"
         >
             <div
                 class="flex flex-col justify-evenly w-full h-full py-2 px-4 md:py-0 bg-white rounded-2xl border-4 border-green-300"
@@ -63,7 +62,7 @@
                     class="flex flex-row items-center mx-auto h-20 w-4/5 md:w-full bg-black-400 gap-4"
                 >
                     <div class="flex flex-1 overflow-x-auto">
-                        <div v-for="index in 7" :key="index" class="min-w-max mx-auto">
+                        <div v-for="index in 6" :key="index" class="min-w-max mx-auto">
                             <div class="flex flex-col justify-around items-center">
                                 <!-- Display the current streak day number adjusted by index -->
                                 <span class="text-black text-xs md:text-1xl font-bold">

src/components/NavBarComponent.vue

 <template>
     <nav class="flex justify-between items-center min-h-32 text-xl w-full px-3 my-0">
-        <div>
+        <div class="order-first basis-1/5">
             <router-link to="/hjem" @click="hamburgerOpen = false">
                 <img
                     alt="logo"
@@ -8,12 +8,8 @@
                     src="@/assets/spareSti.png"
                 />
             </router-link>
-
-            <div class="flex flex-row justify-center">
-                <ButtonDisplayStreak />
-            </div>
         </div>
-        <div v-if="!isHamburger" class="flex flex-row gap-10">
+        <div v-if="!isHamburger" class="flex flex-row justify-center gap-10 mx-auto basis-3/5">
             <router-link active-class="border-b-2" to="/hjem">🏠Hjem</router-link>
             <router-link active-class="border-b-2" to="/sparemaal">🎯Sparemål</router-link>
             <router-link active-class="border-b-2" to="/spareutfordringer"
@@ -22,15 +18,20 @@
             <router-link active-class="border-b-2" to="/profil">🤭Profil</router-link>
         </div>
 
-        <div v-if="!isHamburger" class="flex justify-center w-40">
+        <div v-if="!isHamburger" class="flex-row flex gap-2 justify-end w-auto h-14 basis-1/5">
+            <ButtonDisplayStreak/>
             <button
-                class="primary bg-[#95e35d] logout focus:ring focus:ring-black-300"
+                class="primary basis-1/2 bg-[#95e35d] logout focus:ring focus:ring-black-300 text-nowrap"
                 @click="openModal"
             >
                 Logg ut
             </button>
         </div>
-        <button class="primary logout" v-if="isHamburger" @click="toggleMenu">☰</button>
+        <div class="flex flex-row gap-2">
+          <ButtonDisplayStreak v-if="isHamburger"/>
+          <button class="primary logout" v-if="isHamburger" @click="toggleMenu">☰</button>
+        </div>
+
     </nav>
 
     <div v-if="hamburgerOpen" class="flex flex-col bg-white border border-slate-300 z-50">