oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

Improvement: Sidebar list

Browse Source
This commit is contained in:
Akshay 2021-04-16 16:34:57 +02:00
parent fef6cb9fbf
commit 7e98d8d2c2
1 changed files with 46 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/templates/MarkdownList.jsx
View File

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