refactor: Add sti decoration to certain pages

src/App.vue

@@ -14,29 +14,58 @@ const showNavBar = computed(() => {
         route.path.startsWith('/konfigurasjon')
     )
 })
-</script>
-
-<template>
-    <NavBarComponent v-if="showNavBar" />
 
-    <main class="mb-10">
-        <RouterView />
-    </main>
-</template>
+const showSti = computed(() => {
+    return !(
+        route.path == '/' ||
+        route.path == '/registrer' ||
+        route.path == '/logginn' ||
+        route.path == '/forgotPassword' ||
+        route.path.startsWith('/konfigurasjon') ||
+        route.path == '/hjem' ||
+        route.path == '/profil'
+    )
+})
 
-<style>
-nav {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin: 1rem 0;
-}
+const backgroundImageStyle = computed(() => {
+    if (showSti.value) {
+        return {
+            backgroundImage: "url('src/assets/sti.png')"
+        }
+    } else {
+        return {
+            backgroundImage: "none"
+        }
+    }
+})
 
-nav a.router-link-exact-active {
-    color: var(--color-text);
-}
+</script>
 
-nav a.router-link-exact-active:hover {
-    background-color: transparent;
-}
-</style>
+<template>
+    <div
+        class="min-h-screen bg-left-bottom bg-phone md:bg-pc bg-no-repeat" 
+        :style="backgroundImageStyle">
+      <NavBarComponent v-if="showNavBar" />
+  
+      <main class="mb-10 ">
+          <RouterView />
+      </main>
+    </div>
+  </template>
+  
+  <style>
+  nav {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      margin: 1rem 0;
+  }
+  
+  nav a.router-link-exact-active {
+      color: var(--color-text);
+  }
+  
+  nav a.router-link-exact-active:hover {
+      background-color: transparent;
+  }
+  </style>
\ No newline at end of file