10000 Group sidebar items by first letter · lanahkomputer/docs.hackerone.com@ae7b225 · GitHub
[go: up one dir, main page]
Skip to content

Commit ae7b225

Browse files
lbekkemalbekkema
committed
Group sidebar items by first letter
1 parent b029a8b commit ae7b225

File tree

1 file changed

+33
-12
lines changed

1 file changed

+33
-12
lines changed

‎src/pages/glossary/index.js

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,45 @@ class IndexRoute extends React.Component {
1010
render() {
1111
const { edges } = this.props.data.allMarkdownRemark
1212

13+
const groupedByAlphabet = {};
14+
15+
edges.map((item, index) => {
16+
const firstLetter = item.node.frontmatter.title.charAt(0);
17+
18+
if (groupedByAlphabet[firstLetter] == undefined) {
19+
groupedByAlphabet[firstLetter] = [];
20+
}
21+
22+
groupedByAlphabet[firstLetter].push(item);
23+
});
24+
25+
const allLetters = Object.keys(groupedByAlphabet);
26+
1327
return (
1428
<div className="glossary article">
1529
<Helmet title={`Glossary | ${GatsbyConfig.siteMetadata.title}`} />
1630
<div className="sidebar">
1731
<div className="sidebar__wrapper">
1832
<div className="sidebar__body">
19-
<ul className="sidebar__items sidebar__items--active">
20-
{edges.map((item, index) => {
21-
return (
22-
<li className="sidebar__item">
23-
<a href={`#${slugify(item.node.frontmatter.path)}`}>
24-
{item.node.frontmatter.title}
25-
</a>
26-
</li>
27-
)
28-
})}
29-
</ul>
33+
{allLetters.map((letter, index) => {
34+
return (
35+
<div className="sidebar__section" key={index}>
36+
<h3 className="sidebar__title sidebar__title--active">
37+
{letter}
38+
</h3>
39+
<ul className="sidebar__items sidebar__items--active">
40+
{groupedByAlphabet[letter].map((item, index) => {
41+
return (
42+
<li className="sidebar__item" key={index}>
43+
<a href={`#${slugify(item.node.frontmatter.path)}`}>
44+
{item.node.frontmatter.title}
45+
</a>
46+
</li>
47+
)
48+
})}
49+
</ul>
50+
</div>
51+
)})}
3052
</div>
3153
</div>
3254
</div>
@@ -66,7 +88,6 @@ export const pageQuery = graphql`
6688
frontmatter {
6789
path
6890
title
69-
date
7091
}
7192
}
7293
}

0 commit comments

Comments
 (0)
0