Reimplemented XML Tools and added styling (#227)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #227
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/sidebar/SidebarToolLinkComponent.vue

@@ -2,13 +2,21 @@
 import { RouterLink } from 'vue-router';
 const props = defineProps(
     {
-        elementContent: {required: false},
-        pathTo: {type: String, required:true}
+        elementContent: { required: false },
+        pathTo: { type: String, required: true }
     }
 )
 
 </script>
 
 <template>
-    <RouterLink class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
-</template>
+    <RouterLink
+        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-slate-600"
+        :to="props.pathTo">{{ props.elementContent }}</RouterLink>
+</template>
+
+<style>
+.router-link-active {
+    font-weight: 500;
+}
+</style>