New elements and updates

src/runtime/components/BitinflowFirstLevelLink.vue

@@ -1,7 +1,8 @@
 <template>
   <nuxt-link
     class="hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2"
-    href="#"
+    :class="calculateClasses"
+    :to="to"
   >
     <i :class="['fal text-xl', icon]" />
     <span>
@@ -17,7 +18,29 @@ export default {
     icon: {
       type: String,
       default: 'fa-arrow-up-right-from-square'
+    },
+    to: {
+      type: String,
+      default: '/'
+    }
+  },
+  computed: {
+    calculateClasses: function () {
+      return {
+        'router-link-active': this.$route.path.includes(this.to) && this.to !== '/',
+      }
     }
   }
 }
 </script>
+
+<style scoped>
+.router-link-active {
+  @apply bg-primary-500 dark:bg-primary-500;
+}
+/*
+.router-link-active:hover {
+  @apply bg-primary-600 dark:bg-primary-400;
+}
+*/
+</style>