chore(docs): correctly hover style

docs/.vitepress/components/DocOutlineItem.vue

@@ -52,13 +52,13 @@ function onClick({ target: el }: Event) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  /* transition: color 0.5s; */
+  transition: color 0.5s;
   @apply text-sm leading-8;
 }
 
 .outline-link:hover,
 .outline-link.active {
-  /* transition: color 0.25s; */
+  transition: color 0.25s;
   @apply text-foreground;
 }
 

docs/.vitepress/components/DocSidebar.vue

@@ -22,7 +22,12 @@ defineProps<{
       class="mb-6"
       :default-open="true"
     >
-      <CollapsibleTrigger class="group w-full inline-flex items-center justify-between pb-2 pl-4 pr-4 text-sm font-bold">
+      <CollapsibleTrigger
+        :class="[
+          'group w-full inline-flex items-center justify-between py-1 pl-4 pr-4 text-sm font-bold',
+          'hover:bg-neutral/15 rounded-lg',
+        ]"
+      >
         <span>{{ item.text }}</span>
         <Icon
           icon="lucide:chevron-down"
@@ -30,7 +35,11 @@ defineProps<{
           :class="{ '-rotate-90': !open }"
         />
       </CollapsibleTrigger>
-      <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown">
+      <CollapsibleContent
+        :class="[
+          'overflow-hidden mt-1 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown flex flex-col gap-1',
+        ]"
+      >
         <DocSidebarItem
           v-for="subitem in item.items"
           :key="subitem.text"

docs/.vitepress/components/DocSidebarItem.vue

@@ -24,8 +24,11 @@ watch(isActiveLink, () => {
 
 <template>
   <div
-    class="flex items-center rounded-lg text-sm text-muted-foreground transition-colors duration-150 ease-in-out hover:bg-card"
-    :class="{ 'is-active !bg-primary/10 !text-primary font-semibold': isActiveLink }"
+    :class="[
+      'flex items-center rounded-lg text-sm transition-colors duration-150 ease-in-out hover:bg-card',
+      isActiveLink ? 'is-active !bg-primary/10 !text-primary font-semibold' : '',
+      'hover:bg-primary/10 hover:text-primary',
+    ]"
   >
     <a
       :href="item.link"