fixed backend imports

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>