oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-06-29 00:58:02 +02:00
Code Releases Activity

Merge pull request #633 from oceanprotocol/feature/read-the-docs

Browse Source 
Fixes issue related to selected module when user clicks on sidebar
This commit is contained in:
Akshay 2021-05-04 13:26:23 +02:00 committed by GitHub
commit 5bd24c5be3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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)
})
const moduleKeys = Object.keys(modules).sort()
const [selectedSubSection, setSelectedSubSection] = useState(0)
const [elem, setElem] = useState(
modules[Object.keys(modules)[selectedSubSection]][0]
)
const [elem, setElem] = useState(modules[moduleKeys[selectedSubSection]][0])
const changePage = (subSectionIndex, node) => {
setElem(node)
@ -34,7 +34,7 @@ export default function MarkdownList({ pageContext }) {
const changeSubsection = (index) => {
setSelectedSubSection(index)
setElem(modules[Object.keys(modules)[index]][0])
setElem(modules[moduleKeys[index]][0])
}
return (
@ -49,58 +49,54 @@ export default function MarkdownList({ pageContext }) {
<main className={styles.wrapper}>
<aside className={styles.sidebar}>
<nav className={sidebarStyles.sidebar}>
{Object.keys(modules)
.sort()
.map((ele, subSectionIndex) => {
return selectedSubSection === subSectionIndex ? (
<div key={subSectionIndex}>
<h4 className={sidebarStyles.groupTitle}>
<a
style={{ cursor: 'pointer', color: 'black' }}
onClick={() => changeSubsection(subSectionIndex)}
>
{ele}
</a>
<div className={sidebarStyles.list}>
<ul>
{modules[ele].map((node) => (
<li
className={
elem.id === node.id
? sidebarStyles.active
: sidebarStyles.link
}
key={node.id}
onClick={() =>
changePage(subSectionIndex, node)
}
{moduleKeys.map((ele, subSectionIndex) => {
return selectedSubSection === subSectionIndex ? (
<div key={subSectionIndex}>
<h4 className={sidebarStyles.groupTitle}>
<a
style={{ cursor: 'pointer', color: 'black' }}
onClick={() => changeSubsection(subSectionIndex)}
>
{ele}
</a>
<div className={sidebarStyles.list}>
<ul>
{modules[ele].map((node) => (
<li
className={
elem.id === node.id
? sidebarStyles.active
: sidebarStyles.link
}
key={node.id}
onClick={() => changePage(subSectionIndex, node)}
>
<a
style={{
cursor: 'pointer'
}}
>
<a
style={{
cursor: 'pointer'
}}
>
{node.frontmatter.title}
</a>
</li>
))}
</ul>
</div>
</h4>
</div>
) : (
<div>
<h4 className={sidebarStyles.groupTitle}>
<a
onClick={() => changeSubsection(subSectionIndex)}
style={{ cursor: 'pointer', color: '#8b98a9' }}
>
{ele}
</a>
</h4>
</div>
)
})}
{node.frontmatter.title}
</a>
</li>
))}
</ul>
</div>
</h4>
</div>
) : (
<div>
<h4 className={sidebarStyles.groupTitle}>
<a
onClick={() => changeSubsection(subSectionIndex)}
style={{ cursor: 'pointer', color: '#8b98a9' }}
>
{ele}
</a>
</h4>
</div>
)
})}
</nav>
</aside>
<article className={styles.main}>