From 9bbcd7107843204d4552150df6d043c785d73139 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:46:18 +0100
Subject: [PATCH] Fix hover for DocumentNav links [Fixes #73] (#107)

* fix hover for DocumentNav links [Fixes #73]

* use Box instead of flex Stack

Allows vertical margins of children to collapse into each other

* Revert "use Box instead of flex Stack"

This reverts commit a4811127ccd7424da8f51e2a056aee447fc5db08.

* add :focus and :active states
---
 src/components/UI/docs/DocumentNav.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index 25663a720b..b8ed1b1135 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -28,10 +28,27 @@ export const DocumentNav: FC<Props> = ({ content }) => {
       {parsedHeadings.map((heading, idx) => {
         return (
           <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`}>
-            <Link m={0}>
+            <Link m={0} textDecoration='none !important'>
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
                 textStyle='document-nav-link'
+                _hover={{
+                  background: 'primary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
+                  color: 'bg',
+                }}
+                _focus={{
+                  background: 'primary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important',
+                  color: 'bg',
+                  outline: '2px solid var(--chakra-colors-secondary) !important',
+                  outlineOffset: '4px',
+                }}
+                _active={{
+                  background: 'secondary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
+                  color: 'bg',
+                }}
               >
                 {heading?.title}
               </Text>