fixed backend imports

layouts/Actionbar.vue

@@ -4,7 +4,7 @@
     <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
       @click="toggleActionbar">
       <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
+        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search">
@@ -92,6 +92,15 @@
   </aside>
 </template>
 
+<script setup>
+import { useStore } from 'vuex';
+
+// get accesss to the store
+const store = useStore()
+const toggleEditable = () => {
+  store.commit('toggleEditableAsset');
+};
+</script>
 
 
 <script>
@@ -109,9 +118,6 @@ export default {
       console.log('Actionbar toggled');
       this.isExpanded = !this.isExpanded;
     },
-    toggleEditable() {
-      this.$store.commit('toggleEditableAsset')
-    }
   },
 }
 
@@ -348,4 +354,5 @@ img {
     max-width: 0;
     max-inline-size: 0;
   }
-}</style>
+}
+</style>

layouts/Navigationbar.vue

@@ -13,14 +13,14 @@
     </div>
     <div class="menus">
       <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
-        <nuxt-link to="/home" class="button" @click="defaultAssetPage()"
+        <router-link to="/home" class="button"
           :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Home-Icon.svg" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
-        </nuxt-link>
+        </router-link>
       </nav>
       <nav id="site-menu">
         <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
@@ -31,14 +31,14 @@
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
         </router-link>
-        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()"
           id="assets-button">
           <div class="icon" id="assets-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Assets-Icon.svg" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
-        </router-link>
+        </nuxt-link>
         <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
           id="solutions-button">
           <div class="icon" id="solutions-icon">
@@ -72,25 +72,26 @@
 
 <script setup>
 import { ref } from 'vue';
+import { useStore } from 'vuex';
 
 const darkMode = ref(true)
 const isExpanded = ref(true)
 
+// get accesss to the store
+const store = useStore()
+const defaultAssetPage = () => {
+  store.commit('resetAssetStore');
+  store.commit('changeToAssetlist');
+};
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
-
 </script>
 
 <script>
 export default {
   name: "Navigationbar",
-  methods: {
-    defaultAssetPage() {
-      this.$store.commit('resetChosenAsset')
-      this.$store.commit('changeToAssetlist')
-    }
-  }
 }
 </script>