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

Fixes issue related to selected module when user clicks on sidebar

Browse Source
This commit is contained in:
Akshay 2021-05-04 12:59:54 +02:00
parent e514f405ae
commit 36ddcf9760
1 changed files with 51 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/templates/MarkdownList.jsx
View File

@ -22,10 +22,10 @@ export default function MarkdownList({ pageContext }) {
modules[key].push(node) modules[key].push(node)
}) })
const module_keys = Object.keys(modules).sort()
const [selectedSubSection, setSelectedSubSection] = useState(0) const [selectedSubSection, setSelectedSubSection] = useState(0)
const [elem, setElem] = useState( const [elem, setElem] = useState(modules[module_keys[selectedSubSection]][0])
modules[Object.keys(modules)[selectedSubSection]][0]
)
const changePage = (subSectionIndex, node) => { const changePage = (subSectionIndex, node) => {
setElem(node) setElem(node)
@ -34,7 +34,7 @@ export default function MarkdownList({ pageContext }) {
const changeSubsection = (index) => { const changeSubsection = (index) => {
setSelectedSubSection(index) setSelectedSubSection(index)
setElem(modules[Object.keys(modules)[index]][0]) setElem(modules[module_keys[index]][0])
} }
return ( return (
@ -49,58 +49,54 @@ export default function MarkdownList({ pageContext }) {
<main className={styles.wrapper}> <main className={styles.wrapper}>
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<nav className={sidebarStyles.sidebar}> <nav className={sidebarStyles.sidebar}>
{Object.keys(modules) {module_keys.map((ele, subSectionIndex) => {
.sort() return selectedSubSection === subSectionIndex ? (
.map((ele, subSectionIndex) => { <div key={subSectionIndex}>
return selectedSubSection === subSectionIndex ? ( <h4 className={sidebarStyles.groupTitle}>
<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}
> </a>
{ele} <div className={sidebarStyles.list}>
</a> <ul>
<div className={sidebarStyles.list}> {modules[ele].map((node) => (
<ul> <li
{modules[ele].map((node) => ( className={
<li elem.id === node.id
className={ ? sidebarStyles.active
elem.id === node.id : sidebarStyles.link
? sidebarStyles.active }
: sidebarStyles.link key={node.id}
} onClick={() => changePage(subSectionIndex, node)}
key={node.id} >
onClick={() => <a
changePage(subSectionIndex, node) style={{
} cursor: 'pointer'
}}
> >
<a {node.frontmatter.title}
style={{ </a>
cursor: 'pointer' </li>
}} ))}
> </ul>
{node.frontmatter.title} </div>
</a> </h4>
</li> </div>
))} ) : (
</ul> <div>
</div> <h4 className={sidebarStyles.groupTitle}>
</h4> <a
</div> onClick={() => changeSubsection(subSectionIndex)}
) : ( style={{ cursor: 'pointer', color: '#8b98a9' }}
<div> >
<h4 className={sidebarStyles.groupTitle}> {ele}
<a </a>
onClick={() => changeSubsection(subSectionIndex)} </h4>
style={{ cursor: 'pointer', color: '#8b98a9' }} </div>
> )
{ele} })}
</a>
</h4>
</div>
)
})}
</nav> </nav>
</aside> </aside>
<article className={styles.main}> <article className={styles.main}>