From 7e98d8d2c28a6b469ea3241928363b281acd2c95 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.ap95@gmail.com>
Date: Fri, 16 Apr 2021 16:34:57 +0200
Subject: [PATCH] Improvement: Sidebar list

---
 src/templates/MarkdownList.jsx | 80 +++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/templates/MarkdownList.jsx b/src/templates/MarkdownList.jsx
index 7a040f1e..ac3879ae 100644
--- a/src/templates/MarkdownList.jsx
+++ b/src/templates/MarkdownList.jsx
@@ -4,6 +4,7 @@ import HeaderSection from '../components/HeaderSection'
 import Content from '../components/Content'
 import styles from '../templates/Doc.module.scss'
 import MarkdownTemplate from './MarkdownTemplate'
+import sidebarStyles from '../components/Sidebar.module.scss'
 
 export default function MarkdownList({ pageContext }) {
   const subSections = {}
@@ -35,45 +36,56 @@ export default function MarkdownList({ pageContext }) {
       <Content>
         <main className={styles.wrapper}>
           <aside className={styles.sidebar}>
-            <ul>
+            <nav className={sidebarStyles.sidebar}>
               {Object.keys(subSections).map((ele, subSectionIndex) => {
                 return selectedSubSection === subSectionIndex ? (
-                  <li key={subSectionIndex}>
-                    <a
-                      style={{ cursor: 'pointer', color: 'black' }}
-                      onClick={() => changeSubsection(subSectionIndex)}
-                    >
-                      {ele.replace(/_/g, ' ')}
-                    </a>
-                    <ul>
-                      {subSections[ele].map((node) => (
-                        <li
-                          key={node.id}
-                          onClick={() => changePage(subSectionIndex, node)}
-                        >
-                          <a
-                            style={{
-                              cursor: 'pointer'
-                            }}
-                          >
-                            {node.frontmatter.title.replace(/_/g, ' ')}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </li>
+                  <div key={subSectionIndex}>
+                    <h4 className={sidebarStyles.groupTitle}>
+                      <a
+                        style={{ cursor: 'pointer', color: 'black' }}
+                        onClick={() => changeSubsection(subSectionIndex)}
+                      >
+                        {ele.replace(/_/g, ' ')}
+                      </a>
+                      <div className={sidebarStyles.list}>
+                        <ul>
+                          {subSections[ele].map((node) => (
+                            <li
+                              className={
+                                elem.id === node.id
+                                  ? sidebarStyles.active
+                                  : sidebarStyles.link
+                              }
+                              key={node.id}
+                              onClick={() => changePage(subSectionIndex, node)}
+                            >
+                              <a
+                                style={{
+                                  cursor: 'pointer'
+                                }}
+                              >
+                                {node.frontmatter.title.replace(/_/g, ' ')}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </h4>
+                  </div>
                 ) : (
-                  <li>
-                    <a
-                      onClick={() => changeSubsection(subSectionIndex)}
-                      style={{ cursor: 'pointer', color: '#8b98a9' }}
-                    >
-                      {ele.replace(/_/g, ' ')}
-                    </a>
-                  </li>
+                  <div>
+                    <h4 className={sidebarStyles.groupTitle}>
+                      <a
+                        onClick={() => changeSubsection(subSectionIndex)}
+                        style={{ cursor: 'pointer', color: '#8b98a9' }}
+                      >
+                        {ele.replace(/_/g, ' ')}
+                      </a>
+                    </h4>
+                  </div>
                 )
               })}
-            </ul>
+            </nav>
           </aside>
           <article className={styles.main}>
             <MarkdownTemplate data={elem}></MarkdownTemplate>