Make sure sidebar links provide their own hover colors

opentofu · Sep 19, 2023 · 19a5cd3 · 19a5cd3
1 parent e2a100b
commit 19a5cd3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/src/theme/DocSidebarItem/Category.tsx b/src/theme/DocSidebarItem/Category.tsx
@@ -113,13 +113,11 @@ export default function DocSidebarItemCategory({
   return (
     <li>
       <Link
-        className={clsx(
-          "flex justify-between items-center py-2 px-4 hover:text-gray-900 hover:dark:text-brand-600",
-          {
-            "bg-brand-500 dark:bg-brand-800 text-gray-900  dark:text-brand-600":
-              isActive,
-          }
-        )}
+        className={clsx("flex justify-between items-center py-2 px-4", {
+          "bg-brand-500 dark:bg-brand-800 text-gray-900 hover:text-gray-900 dark:text-brand-600 dark:hover:text-brand-600":
+            isActive,
+          "hover:text-gray-900 hover:dark:text-brand-600": !isActive,
+        })}
         onClick={
           collapsible
             ? (e) => {

diff --git a/src/theme/DocSidebarItem/Link.tsx b/src/theme/DocSidebarItem/Link.tsx
@@ -20,13 +20,11 @@ export default function DocSidebarItemLink({
   return (
     <li className={className} key={label}>
       <Link
-        className={clsx(
-          "flex py-2 px-4 hover:text-gray-900 hover:dark:text-brand-600",
-          {
-            "bg-brand-500 dark:bg-brand-800 text-gray-900 dark:text-brand-600":
-              isActive,
-          }
-        )}
+        className={clsx("flex py-2 px-4 ", {
+          "bg-brand-500 dark:bg-brand-800 text-gray-900 hover:text-gray-900 dark:text-brand-600 dark:hover:text-brand-600":
+            isActive,
+          "hover:text-gray-900 hover:dark:text-brand-600": !isActive,
+        })}
         autoAddBaseUrl={autoAddBaseUrl}
         aria-current={isActive ? "page" : undefined}
         to={href}