diff --git a/src/components/ButtonDisplayStreak.vue b/src/components/ButtonDisplayStreak.vue index b9fbb10340301bf7a65c12b678844b7e5953771d..5b4832f0f0f92f85277737ef7f5330c3bc8591f2 100644 --- a/src/components/ButtonDisplayStreak.vue +++ b/src/components/ButtonDisplayStreak.vue @@ -1,6 +1,5 @@ <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"> diff --git a/src/components/NavBarComponent.vue b/src/components/NavBarComponent.vue index 924816689e21f4e077342f8c2a448454838c8a5d..4aa1a21b5e7aaf017b5447d24ebc9bb739440fee 100644 --- a/src/components/NavBarComponent.vue +++ b/src/components/NavBarComponent.vue @@ -1,6 +1,6 @@ <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">