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,62 +21,83 @@ interface Props {
   navLinks: NavLink[];
 }
 
-export const DocsLinks: FC<Props> = ({ navLinks }) => (
-  <Stack border='2px' borderColor='primary'>
-    {navLinks.map(({ id, to, items }, idx) => {
-      return (
-        <Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}>
-          <AccordionItem border='none'>
-            {({ isExpanded }) => (
-              <>
-                <AccordionButton
-                  borderBottom={navLinks.length - 1 === idx ? 'none' : '2px'}
-                  p={0}
-                  borderColor='primary'
-                  justifyContent='space-between'
-                  placeContent='flex-end'
-                  bg='button-bg'
-                >
-                  <Stack
-                    p={4}
-                    borderRight={items ? '2px' : 'none'}
+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'>
+              {({ isExpanded }) => (
+                <>
+                  <AccordionButton
+                    borderBottom={navLinks.length - 1 === idx ? 'none' : '2px'}
+                    p={0}
                     borderColor='primary'
-                    w='100%'
-                    bg='bg'
+                    justifyContent='space-between'
+                    placeContent='flex-end'
+                    bg='button-bg'
+                    data-group
                   >
-                    {to ? (
-                      <NextLink href={to} passHref>
-                        <Link>
-                          <Text textStyle='docs-nav-dropdown'>{id}</Text>
-                        </Link>
-                      </NextLink>
-                    ) : (
-                      <Text textStyle='docs-nav-dropdown'>{id}</Text>
-                    )}
-                  </Stack>
-
-                  {items && (
-                    <Stack minW='61px'>
-                      <Center>
-                        {isExpanded ? (
-                          <MinusIcon w='20px' h='20px' color='primary' />
-                        ) : (
-                          <AddIcon w='20px' h='20px' color='primary' />
-                        )}
-                      </Center>
+                    <Stack
+                      p={4}
+                      borderRight={items ? '2px' : 'none'}
+                      borderColor='primary'
+                      w='100%'
+                      bg='bg'
+                      _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
+                    >
+                      {to ? (
+                        <NextLink href={to} passHref>
+                          <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>
+                      ) : (
+                        <Text textStyle='docs-nav-dropdown'>{id}</Text>
+                      )}
                     </Stack>
+
+                    {items && (
+                      <Stack minW='61px'>
+                        <Center>
+                          {isExpanded ? (
+                            <MinusIcon w='20px' h='20px' color='primary' />
+                          ) : (
+                            <AddIcon w='20px' h='20px' color='primary' />
+                          )}
+                        </Center>
+                      </Stack>
+                    )}
+                  </AccordionButton>
+                  {items && (
+                    <AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}>
+                      <LinksList links={items} />
+                    </AccordionPanel>
                   )}
-                </AccordionButton>
-                {items && (
-                  <AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}>
-                    <LinksList links={items} />
-                  </AccordionPanel>
-                )}
-              </>
-            )}
-          </AccordionItem>
-        </Accordion>
-      );
-    })}
-  </Stack>
-);
+                </>
+              )}
+            </AccordionItem>
+          </Accordion>
+        );
+      })}
+    </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,28 +9,49 @@ interface LinksListProps {
   links: NavLink[];
 }
 
-export const LinksList: FC<LinksListProps> = ({ links }) => (
-  <Stack px={4}>
-    {links.map(({ id, to, items }) => {
-      return to ? (
-        <Stack key={id}>
-          <NextLink href={to} passHref key={id}>
-            <Link>
-              <Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
-                {id}
-              </Text>
-            </Link>
-          </NextLink>
-          {items && <LinksList links={items} />}
-        </Stack>
-      ) : (
-        <Stack key={id}>
-          <Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
-            {id}
-          </Text>
-          {items && <LinksList links={items} />}
-        </Stack>
-      );
-    })}
-  </Stack>
-);
+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} _hover={{ background: 'primary', color: 'bg' }} data-group>
+            <NextLink href={to} passHref key={id}>
+              <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>
+            </NextLink>
+            {items && <LinksList links={items} />}
+          </Stack>
+        ) : (
+          <Stack key={id}>
+            <Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
+              {id}
+            </Text>
+            {items && <LinksList links={items} />}
+          </Stack>
+        );
+      })}
+    </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