Improvement: Refactor Markdownlist

src/templates/Markdown/Markdown.module.scss

@@ -0,0 +1,32 @@
+@import 'variables';
+
+.link {
+  color: $brand-grey;
+  display: inline-block;
+  padding: $spacer / 6 $spacer / 2;
+  border-left: 0.1rem solid transparent;
+  margin-left: -0.05rem;
+  cursor: 'pointer';
+
+  &:hover,
+  &:focus {
+    transform: none;
+    color: $brand-purple;
+
+    :global(.setup) & {
+      color: $brand-blue;
+    }
+  }
+}
+
+.active {
+  composes: link;
+  color: $brand-purple;
+  border-left-color: $brand-purple;
+  cursor: 'pointer';
+
+  :global(.setup) & {
+    color: $brand-blue;
+    border-left-color: $brand-blue;
+  }
+}

src/templates/Markdown/MarkdownList.jsx

@@ -6,6 +6,8 @@ import Content from '../../components/Content'
 import styles from '../../templates/Doc.module.scss'
 import MarkdownTemplate from '../MarkdownTemplate'
 import sidebarStyles from '../../components/Sidebar.module.scss'
+import moduleStyles from './Markdown.module.scss'
+
 import { generatedNestedObject } from './utils'
 
 export default function MarkdownList({ pageContext }) {
@@ -17,7 +19,6 @@ export default function MarkdownList({ pageContext }) {
     const key =
       modulePath.slice(0, modulePath.length - 1).join('.') ||
       modulePath.join('.')
-
     if (!flattenedModules[key]) {
       flattenedModules[key] = []
     }
@@ -26,42 +27,27 @@ export default function MarkdownList({ pageContext }) {
   })
 
   const moduleKeys = Object.keys(flattenedModules).sort()
-  const [selectedNodeId, setSelectedNodeId] = useState(
+
-    flattenedModules[moduleKeys[0]][0].id
-  )
   const [selectedModule, setSelectedModule] = useState(
     flattenedModules[moduleKeys[0]][0]
   )
 
   const changeNodeid = (id) => {
-    setSelectedNodeId(id)
+    const found = pageContext.markdownList.find(({ node }) => {
+      return node.id === id
+    })
 
-    for (let i = 0; i < pageContext.markdownList.length; i++) {
+    setSelectedModule(found.node)
-      var { node } = pageContext.markdownList[i]
-      if (node.id === id) {
-        setSelectedModule(node)
-        break
-      }
-    }
   }
 
-  const generateModuleListElement = (node) => {
+  const generateModuleListElement = (id, label) => {
-    const { id } = node
-    const color = selectedNodeId === id ? 'black' : '#8b98a9'
     const className =
-      selectedNodeId === id ? sidebarStyles.active : sidebarStyles.link
+      selectedModule.id === id ? moduleStyles.active : moduleStyles.link
 
     return (
       <li key={id} id={id}>
-        <a
+        <a className={className} onClick={() => changeNodeid(id)}>
-          className={className}
+          {label}
-          onClick={() => changeNodeid(id)}
-          style={{
-            cursor: 'pointer',
-            color
-          }}
-        >
-          {node.label}
         </a>
       </li>
     )
@@ -70,7 +56,8 @@ export default function MarkdownList({ pageContext }) {
   const sidebarList = (title, nestedModules) => {
     const { id } = nestedModules
 
-    if (id) return generateModuleListElement(nestedModules)
+    if (id)
+      return generateModuleListElement(nestedModules.id, nestedModules.label)
 
     const keys = Object.keys(nestedModules).sort()
     const children = []