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: Highlight selected sub-section

Browse Source
This commit is contained in:
Akshay 2021-04-12 13:42:34 +02:00
parent e5487f32bf
commit fef6cb9fbf
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/templates/MarkdownList.jsx
View File

@ -6,17 +6,17 @@ import styles from '../templates/Doc.module.scss'
import MarkdownTemplate from './MarkdownTemplate'
export default function MarkdownList({ pageContext }) {
const sub_sections = {}
const subSections = {}
pageContext.markdownList.map(({ node }) => {
if (!sub_sections[node.frontmatter.sub_section]) {
sub_sections[node.frontmatter.sub_section] = []
if (!subSections[node.frontmatter.sub_section]) {
subSections[node.frontmatter.sub_section] = []
}
sub_sections[node.frontmatter.sub_section].push(node)
subSections[node.frontmatter.sub_section].push(node)
})
const [selectedSubSection, setSelectedSubSection] = useState(0)
const [elem, setElem] = useState(
sub_sections[Object.keys(sub_sections)[selectedSubSection]][0]
subSections[Object.keys(subSections)[selectedSubSection]][0]
)
const changePage = (subSectionIndex, node) => {
@ -26,7 +26,7 @@ export default function MarkdownList({ pageContext }) {
const changeSubsection = (index) => {
setSelectedSubSection(index)
setElem(sub_sections[Object.keys(sub_sections)[index]][0])
setElem(subSections[Object.keys(subSections)[index]][0])
}
return (
@ -36,28 +36,40 @@ export default function MarkdownList({ pageContext }) {
<main className={styles.wrapper}>
<aside className={styles.sidebar}>
<ul>
{Object.keys(sub_sections).map((ele, subSectionIndex) => {
{Object.keys(subSections).map((ele, subSectionIndex) => {
return selectedSubSection === subSectionIndex ? (
<li key={subSectionIndex}>
<div onClick={() => changeSubsection(subSectionIndex)}>
<a
style={{ cursor: 'pointer', color: 'black' }}
onClick={() => changeSubsection(subSectionIndex)}
>
{ele.replace(/_/g, ' ')}
</div>
</a>
<ul>
{sub_sections[ele].map((node) => (
{subSections[ele].map((node) => (
<li
key={node.id}
onClick={() => changePage(subSectionIndex, node)}
>
{node.frontmatter.title.replace(/_/g, ' ')}
<a
style={{
cursor: 'pointer'
}}
>
{node.frontmatter.title.replace(/_/g, ' ')}
</a>
</li>
))}
</ul>
</li>
) : (
<li>
<div onClick={() => changeSubsection(subSectionIndex)}>
<a
onClick={() => changeSubsection(subSectionIndex)}
style={{ cursor: 'pointer', color: '#8b98a9' }}
>
{ele.replace(/_/g, ' ')}
</div>
</a>
</li>
)
})}

6
src/templates/MarkdownTemplate.jsx
View File

@ -6,10 +6,6 @@ export default function MarkdownTemplate({ data }) {
const post = data
return (
<>
{/* <div dangerouslySetInnerHTML={{__html:post.html}}></div> */}
{/* <DocHeader title={post.frontmatter.title}/> */}
{/* <HeaderSection title={post.frontmatter.title} />
{post.tableOfContents && <DocToc tableOfContents={post.tableOfContents} />}*/}
<Content>
{post && post.html ? (
<DocContent html={post.html} htmlAst={post.htmlAst} />
@ -43,4 +39,4 @@ export default function MarkdownTemplate({ data }) {
// }
// }
// }
//`
// `