Keep Docusaurus sidebar link color

nl-design-system · Dec 16, 2024 · 767b12f · 767b12f
1 parent 09c1b90
commit 767b12f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/docusaurus/src/theme/DocSidebarItem/Link/index.tsx b/packages/docusaurus/src/theme/DocSidebarItem/Link/index.tsx
@@ -5,6 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import { Link } from '@nl-rvo/components';
 import type { Props } from '@theme/DocSidebarItem/Link';
 import clsx from 'clsx';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemLink({ item, onItemClick, activePath, level, ...props }: Props): JSX.Element {
   const { href, label, className } = item;
@@ -32,6 +33,7 @@ export default function DocSidebarItemLink({ item, onItemClick, activePath, leve
         {...props}
         showIcon={!isInternalLink ? 'after' : 'no'}
         icon={!isInternalLink ? 'externe-link' : undefined}
+        className={styles['sidebar-link']}
       >
         {label}
       </Link>

diff --git a/packages/docusaurus/src/theme/DocSidebarItem/Link/styles.module.css b/packages/docusaurus/src/theme/DocSidebarItem/Link/styles.module.css
@@ -0,0 +1,4 @@
+.sidebar-link:hover,
+.sidebar-link:focus {
+  color: var(--rvo-color-grijs-700) !important;
+}