Stylize active docs link [Fixes #74, Fixes #115] (#108)

* add bold for active docs link [Fixes #74]

* Add ::before indicator to active doc link

Removes bold styling per design

* Update documentation-links.yaml

Makes it so `id` is paired with either a `to` field OR a list of `items` but not both

* Updates hover styling for left docs nav

* clean up styling

Removes remaining underlines from links styled as buttons. Cleans up logic for conditionally showing the ::before pseudo element. Makes the ::before indicator slightly larger.

* tweak ::before indicator styling

* tweak ::before indicator styling

src/components/UI/docs/DocsLinks.tsx

@@ -11,6 +11,7 @@ import {
 } from '@chakra-ui/react';
 import { AddIcon, MinusIcon } from '@chakra-ui/icons';
 import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 
 import { LinksList } from './';
 
@@ -20,9 +21,14 @@ interface Props {
   navLinks: NavLink[];
 }
 
-export const DocsLinks: FC<Props> = ({ navLinks }) => (
+export const DocsLinks: FC<Props> = ({ navLinks }) => {
+  const router = useRouter();
+  const { slug } = router.query;
+  return (
     <Stack border='2px' borderColor='primary'>
       {navLinks.map(({ id, to, items }, idx) => {
+        const split = to?.split('/')
+        const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
         return (
           <Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}>
             <AccordionItem border='none'>
@@ -35,6 +41,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => (
                     justifyContent='space-between'
                     placeContent='flex-end'
                     bg='button-bg'
+                    data-group
                   >
                     <Stack
                       p={4}
@@ -42,11 +49,25 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => (
                       borderColor='primary'
                       w='100%'
                       bg='bg'
+                      _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
                     >
                       {to ? (
                         <NextLink href={to} passHref>
-                        <Link>
-                          <Text textStyle='docs-nav-dropdown'>{id}</Text>
+                          <Link textDecoration='none !important'>
+                            <Text
+                              textStyle='docs-nav-dropdown'
+                              color={isActive ? 'primary' : 'unset'}
+                              _before={{
+                                content: '"■"',
+                                verticalAlign: '-1.25px',
+                                marginInlineEnd: 2,
+                                fontSize: 'lg',
+                                display: isActive ? 'unset' : 'none',
+                              }}
+                              _groupHover={{ color: 'bg' }}
+                            >
+                              {id}
+                            </Text>
                           </Link>
                         </NextLink>
                       ) : (
@@ -79,3 +100,4 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => (
       })}
     </Stack>
   );
+}

src/components/UI/docs/LinkList.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { Link, Stack, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 
 import { NavLink } from '../../../types';
 
@@ -8,14 +9,34 @@ interface LinksListProps {
   links: NavLink[];
 }
 
-export const LinksList: FC<LinksListProps> = ({ links }) => (
+export const LinksList: FC<LinksListProps> = ({ links }) => {
+  const router = useRouter();
+  const { slug } = router.query;
+  return (
     <Stack px={4}>
       {links.map(({ id, to, items }) => {
+        const split = to?.split('/')
+        const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
         return to ? (
-        <Stack key={id}>
+          <Stack key={id} _hover={{ background: 'primary', color: 'bg' }} data-group>
             <NextLink href={to} passHref key={id}>
-            <Link>
-              <Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
+              <Link textDecoration='none !important'>
+                <Text
+                  textStyle='docs-nav-links'
+                  color={items || isActive ? 'primary' : 'body'}
+                  _before={{
+                    content: '"■"',
+                    verticalAlign: '-1.25px',
+                    marginInlineEnd: 2,
+                    fontSize: 'lg',
+                    display: isActive ? 'unset' : 'none',
+                  }}
+                  _groupHover={{
+                    color: 'bg',
+                    boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)',
+                    
+                  }}
+                >
                   {id}
                 </Text>
               </Link>
@@ -33,3 +54,4 @@ export const LinksList: FC<LinksListProps> = ({ links }) => (
       })}
     </Stack>
   );
+};

src/data/documentation-links.yaml

@@ -1,6 +1,7 @@
 - id: Getting started
-  to: /docs/getting-started
   items:
+    - id: Introduction
+      to: /docs/getting-started
     - id: Hardware requirements
       to: /docs/getting-started/hardware-requirements
     - id: Installing Geth
@@ -8,8 +9,9 @@
     - id: Consensus clients
       to: /docs/getting-started/consensus-clients
 - id: Fundamentals
-  to: /docs/fundamentals
   items:
+    - id: Introduction
+      to: /docs/fundamentals
     - id: Node architecture
       to: /docs/fundamentals/node-architecture
     - id: Command-line options
@@ -35,8 +37,9 @@
 - id: Interacting with Geth
   items:
     - id: JSON-RPC Server
-      to: /docs/interacting-with-geth/rpc
       items:
+        - id: Introduction
+          to: /docs/interacting-with-geth/rpc
         - id: Batch requests
           to: /docs/interacting-with-geth/rpc/batch
         - id: GraphQL server
@@ -70,8 +73,9 @@
     - id: 'JavaScript Console 2: Contracts'
       to: /docs/interacting-with-geth/javascript-console-contracts
 - id: Developers
-  to: /docs/developers
   items:
+    - id: Introduction
+      to: /docs/developers
     - id: Dapp developers
       items:
         - id: Go API
@@ -83,8 +87,9 @@
         - id: Geth for Mobile
           to: /docs/developers/dapp-developer/mobile
     - id: EVM tracing
-      to: /docs/developers/evm-tracing
       items:
+        - id: Introduction
+          to: /docs/developers/evm-tracing
         - id: Basic traces
           to: /docs/developers/evm-tracing/basic-traces
         - id: Built-in tracers