change(sidebar style)!: match VitePress default style (#74)

enzonotario · Oct 8, 2024 · 739de1d · 739de1d
1 parent 375b6d1
commit 739de1d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/src/composables/useSidebar.ts b/src/composables/useSidebar.ts
@@ -31,9 +31,9 @@ export function useSidebar({
   const openapi = OpenApi({ spec: options.spec })
 
   function sidebarItemTemplate(method: string, title: string) {
-    return `<span class="OASidebarItem">
+    return `<span class="OASidebarItem group/oaSidebarItem">
         <span class="OASidebarItem-badge OAMethodBadge--${method.toLowerCase()}">${method.toUpperCase()}</span>
-        <span class="OASidebarItem-text">${title}</span>
+        <p class="OASidebarItem-text text">${title}</p>
       </span>`
   }
 

diff --git a/src/style.css b/src/style.css
@@ -60,48 +60,62 @@
   }
 }
 
-.VPSidebarItem:has(.OASidebarItem) .is-link:hover {
-  @apply bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-gray-100 rounded;
-}
-.VPSidebarItem:has(.OASidebarItem) .is-link {
-  @apply text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 rounded;
-}
-.VPSidebarItem:has(.OASidebarItem) .is-active {
-  @apply bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-gray-100 rounded;
-}
-.VPSidebarItem:has(.OASidebarItem) .is-active .OASidebarItem-text {
-  @apply font-semibold;
-}
+/**
+  Sidebar
+ */
+
 .OASidebarItem {
   @apply flex flex-row items-center w-full px-2 space-x-1;
 }
 .OASidebarItem-badge {
   @apply px-1 py-0.5 text-xs rounded;
 }
-.OASidebarItem-text {
-  @apply truncate max-w-[170px] text-gray-800 dark:text-gray-100;
-}
+
+/**
+  Method badges
+ */
 
 .OAMethodBadge--get {
-  @apply bg-green-200 text-green-800 hover:bg-green-300 dark:bg-green-800 dark:text-green-200 dark:hover:bg-green-700;
+  @apply bg-green-200 text-green-800
+    group-hover/oaSidebarItem:bg-green-300 hover:bg-green-300
+    dark:bg-green-800 dark:text-green-200
+    dark:group-hover/oaSidebarItem:bg-green-700 dark:hover:bg-green-700;
 }
 .OAMethodBadge--post {
-  @apply bg-blue-200 text-blue-800 hover:bg-blue-300 dark:bg-blue-800 dark:text-blue-200 dark:hover:bg-blue-700;
+  @apply bg-blue-200 text-blue-800
+    group-hover/oaSidebarItem:bg-blue-300 hover:bg-blue-300
+    dark:bg-blue-800 dark:text-blue-200
+    dark:group-hover/oaSidebarItem:bg-blue-700 dark:hover:bg-blue-700;
 }
 .OAMethodBadge--put {
-  @apply bg-yellow-200 text-yellow-800 hover:bg-yellow-300 dark:bg-yellow-800 dark:text-yellow-200 dark:hover:bg-yellow-700;
+  @apply bg-yellow-200 text-yellow-800
+    group-hover/oaSidebarItem:bg-yellow-300 hover:bg-yellow-300
+    dark:bg-yellow-800 dark:text-yellow-200
+    dark:group-hover/oaSidebarItem:bg-yellow-700 dark:hover:bg-yellow-700;
 }
 .OAMethodBadge--delete {
-  @apply bg-red-200 text-red-800 hover:bg-red-300 dark:bg-red-800 dark:text-red-200 dark:hover:bg-red-700;
+  @apply bg-red-200 text-red-800
+    group-hover/oaSidebarItem:bg-red-300 hover:bg-red-300
+    dark:bg-red-800 dark:text-red-200
+    dark:group-hover/oaSidebarItem:bg-red-700 dark:hover:bg-red-700;
 }
 .OAMethodBadge--patch {
-  @apply bg-purple-200 text-purple-800 hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-200 dark:hover:bg-purple-700;
+  @apply bg-purple-200 text-purple-800
+    group-hover/oaSidebarItem:bg-purple-300 hover:bg-purple-300
+    dark:bg-purple-800 dark:text-purple-200
+    dark:group-hover/oaSidebarItem:bg-purple-700 dark:hover:bg-purple-700;
 }
 .OAMethodBadge--options {
-  @apply bg-indigo-200 text-indigo-800 hover:bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-200 dark:hover:bg-indigo-700;
+  @apply bg-indigo-200 text-indigo-800
+    group-hover/oaSidebarItem:bg-indigo-300 hover:bg-indigo-300
+    dark:bg-indigo-800 dark:text-indigo-200
+    dark:group-hover/oaSidebarItem:bg-indigo-700 dark:hover:bg-indigo-700;
 }
 .OAMethodBadge--head {
-  @apply bg-pink-200 text-pink-800 hover:bg-pink-300 dark:bg-pink-800 dark:text-pink-200 dark:hover:bg-pink-700;
+  @apply bg-pink-200 text-pink-800
+    group-hover/oaSidebarItem:bg-pink-300 hover:bg-pink-300
+    dark:bg-pink-800 dark:text-pink-200
+    dark:group-hover/oaSidebarItem:bg-pink-700 dark:hover:bg-pink-700;
 }
 
 /**

diff --git a/test/composables/useSidebar.test.ts b/test/composables/useSidebar.test.ts
@@ -7,9 +7,9 @@ describe('useSidebar', () => {
 
   it('creates a sidebar item template', () => {
     const result = useSidebar().sidebarItemTemplate('get', 'GET /users With a Long Title')
-    expect(result).toBe(`<span class="OASidebarItem">
+    expect(result).toBe(`<span class="OASidebarItem group/oaSidebarItem">
         <span class="OASidebarItem-badge OAMethodBadge--get">GET</span>
-        <span class="OASidebarItem-text">GET /users With a Long Title</span>
+        <p class="OASidebarItem-text text">GET /users With a Long Title</p>
       </span>`)
   })