tailwind

src/components/SideBar/SideBarMenuItem.vue

@@ -6,19 +6,10 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="text-decoration-none w-100 d-block"
-    :class="props.active ? 'link-primary fw-bolder' : 'link-secondary'"
+    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200"
+    :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
-    <i :class="`bi bi-${props.icon}`" class="me-2" v-if="props.icon"></i
+    <i :class="`bi bi-${props.icon}`" class="mr-2" v-if="props.icon"></i
     ><slot></slot>
   </a>
 </template>
-<style scoped lang="scss">
-a {
-  cursor: pointer;
-  border-radius: var(--bs-border-radius);
-}
-a:hover {
-  background-color: var(--bs-gray-300);
-}
-</style>