refactor(navbar): navbar cleanup

src/App.vue

 <script setup lang="ts">
 import NavBarComponent from '@/components/NavBarComponent.vue'
+import { RouterView, useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const showNavBar = computed(() => {
+    return !(
+        route.path == '/' ||
+        route.path == '/registrer' ||
+        route.path == '/logginn' ||
+        route.path == '/forgotPassword'
+    )
+})
 </script>
 
 <template>
-    <NavBarComponent />
+    <NavBarComponent v-if="showNavBar" />
+
+    <main>
+        <RouterView />
+    </main>
 </template>

src/components/NavBarComponent.vue

 <template>
-    <nav v-if="showNavBar" class="flex justify-center items-center mt-10 text-xl w-full">
+    <nav class="flex justify-between items-center min-h-32 text-xl w-full px-3">
         <div>
-            <img
-                src="@/assets/spareSti.png"
-                alt="logo"
-                class="absolute left-0 top-8 w-48 h-15 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-110 hover:opacity-90"
-                @click="goToHome"
-            />
-            <div class="absolute left-6 top-24 flex-1 sm:flex justify-start items-center">
-                <div class="flex md:left-80 md:top-20 right-28 top-20 items-center">
-                    <img src="@/assets/streakFlame.png" alt="streak" class="w-8 h-8" />
-                    <p class="font-bold">Streak</p>
-                </div>
+            <router-link to="/hjem" @click="hamburgerOpen = false">
+                <img
+                    alt="logo"
+                    class="w-40 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-110 hover:opacity-90"
+                    src="@/assets/spareSti.png"
+                />
+            </router-link>
+
+            <div class="flex flex-row justify-center">
+                <img alt="streak" class="w-8 h-8" src="@/assets/streakFlame.png" />
+                <p class="font-bold">Streak</p>
             </div>
         </div>
-        <div class="navcontainer flex space-x-10 justify-center">
-            <router-link to="/hjem" class="nav-link" active-class="border-b-2">🏠Hjem</router-link>
-            <router-link to="/sparemaal" class="nav-link" active-class="border-b-2"
-                >🎯Sparemål</router-link
-            >
-            <router-link to="/spareutfordringer" class="nav-link" active-class="border-b-2"
+        <div v-if="!isHamburger" class="flex flex-row gap-10">
+            <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"
                 >💰Spareutfordringer</router-link
             >
-            <router-link to="/profil" class="nav-link" active-class="border-b-2"
-                >🤭Profil</router-link
-            >
-            <router-link to="/konfigurasjonSteg1" class="nav-link" active-class="border-b-2"
-                >🛠️Konfigurasjon</router-link
-            >
-            <button
-                @click="logout"
-                class="hidden sm:flex absolute right-10 py-2 px-6 rounded-full focus:outline-none focus:ring focus:ring-black-300"
-            >
-                Logg ut
-            </button>
+            <router-link active-class="border-b-2" to="/profil">🤭Profil</router-link>
         </div>
-        <button class="hamburger-menu sm:hidden absolute right-10 top-10" @click="toggleMenu">
-            <p>☰</p>
-        </button>
+
+        <div v-if="!isHamburger" class="flex justify-center w-40">
+            <button class="focus:ring focus:ring-black-300" @click="logout">Logg ut</button>
+        </div>
+        <button v-if="isHamburger" @click="toggleMenu">☰</button>
     </nav>
 
     <div
-        v-if="menuOpen"
-        class="sm:hidden flex flex-col bg-white absolute border border-slate-300 top-10 w-full mt-10 z-50 rounded-xl"
+        v-if="hamburgerOpen"
+        class="flex flex-col bg-white absolute border border-slate-300 top-10 w-full mt-10 z-50"
     >
-        <router-link to="/hjem" @click="menuOpen = false">🏠Hjem</router-link>
-        <router-link to="/sparemaal" @click="menuOpen = false">🎯Sparemål</router-link>
-        <router-link to="/spareutfordringer" @click="menuOpen = false"
+        <router-link to="/hjem" @click="hamburgerOpen = false">🏠Hjem</router-link>
+        <router-link to="/sparemaal" @click="hamburgerOpen = false">🎯Sparemål</router-link>
+        <router-link to="/spareutfordringer" @click="hamburgerOpen = false"
             >💰Spareutfordringer</router-link
         >
-        <router-link to="/profil" @click="menuOpen = false">🤭Profil</router-link>
-        <router-link to="/konfigurasjonSteg1" @click="menuOpen = false"
-            >🛠️Konfigurasjon</router-link
-        >
-        <button
-            @click="logout"
-            class="py-2 px-6 mx-auto rounded-full focus:outline-none focus:ring focus:ring-black-300 bg-transparent"
-        >
+        <router-link to="/profil" @click="hamburgerOpen = false">🤭Profil</router-link>
+        <button class="focus:ring focus:ring-black-300 bg-transparent" @click="logout">
             Logg ut
         </button>
     </div>
-
-    <main>
-        <RouterView />
-    </main>
 </template>
 
 <script setup lang="ts">
-import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
-import { computed, onMounted, ref } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
+import { onMounted, ref } from 'vue'
 
-const route = useRoute()
 const router = useRouter()
-const windowWidth = ref(window.innerWidth)
-const menuOpen = ref(false)
 
-const showNavBar = computed(() => {
-    return (
-        route.path == '/hjem' ||
-        route.path == '/sparemaal' ||
-        route.path == '/spareutfordringer' ||
-        route.path == '/profil' ||
-        route.path == '/konfigurasjonSteg1'
-    )
-})
+const windowWidth = ref(window.innerWidth)
+const hamburgerOpen = ref(false)
+const isHamburger = ref(false)
 
 const logout = () => {
     router.push('/login')
-    menuOpen.value = false
+    hamburgerOpen.value = false
 }
 
-const goToHome = () => {
-    router.push('/hjem')
-    menuOpen.value = false
+const toggleMenu = () => {
+    hamburgerOpen.value = !hamburgerOpen.value
 }
 
-const toggleMenu = () => {
-    menuOpen.value = !menuOpen.value
+const updateWindowWidth = () => {
+    windowWidth.value = window.innerWidth
+    if (windowWidth.value < 1150) {
+        isHamburger.value = true
+    } else {
+        isHamburger.value = false
+        hamburgerOpen.value = false
+    }
 }
 
 onMounted(() => {
-    const updateWindowWidth = () => {
-        windowWidth.value = window.innerWidth
-    }
     window.addEventListener('resize', updateWindowWidth)
+    updateWindowWidth()
 })
 </script>
 
-<style scoped>
-@media (max-width: 1150px) {
-    .hamburger-menu {
-        display: block;
-        cursor: pointer;
-    }
-    .navcontainer {
-        display: none;
-    }
-}
-</style>
+<style scoped></style>
\ No newline at end of file