Skip to content

Commit 867dd3c

Browse files
shabarish-testsigmashabarish-testsigma
authored
WEB-102 - Navigation Menu issues in Docs and Tutorials (#11)
1 parent 433d6e2 commit 867dd3c

1 file changed

Lines changed: 29 additions & 5 deletions

File tree

‎src/components/LeftNav.jsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,29 @@ class ListItem extends React.Component {
3333
const { active } = this.state;
3434
if (active.indexOf(name) === -1) {
3535
this.setState((prev) => ({ active: [...prev.active, name] }));
36+
const { expandedPanels } = this.state;
37+
if(!expandedPanels){
38+
this.setState(() => ({ expandedPanels: [ name] }));
39+
}
3640
}
3741
} // sets a given list item as active
3842

43+
44+
toggleExpansion(identifier) {
45+
const { expandedPanels } = this.state;
46+
if (expandedPanels?.indexOf(identifier) === -1) {
47+
this.setState((prev) => ({ expandedPanels: [...prev.expandedPanels, identifier] }));
48+
} else if(expandedPanels){
49+
expandedPanels.splice(expandedPanels.indexOf(identifier), 1);
50+
this.setState(() => ({ expandedPanels: [...expandedPanels] }));
51+
}
52+
}
53+
3954
toggleActive = (e) => {
4055
let title;
4156
if (e.target.attributes.identifier) {
4257
title = e.target.attributes.identifier.value;
43-
} else if (e.target.nextSibling.attributes.identifier) {
58+
} else if (e.target.nextSibling?.attributes.identifier) {
4459
title = e.target.nextSibling.attributes.identifier.value;
4560
}
4661
const { active } = this.state;
@@ -83,32 +98,41 @@ class ListItem extends React.Component {
8398
// Appending overview page link to Parent node (which has arrow icon with title)
8499
// Instead of having overview as a separate link.
85100
let overviewLink = null;
86-
Object.keys(data).map(key => {
101+
Object.keys(data).reverse().map(key => {
87102
if (data.hasOwnProperty('overview')) {
88103
if (data['overview'].url.indexOf(`/${name}/overview/`) !== -1)
89104
overviewLink = data['overview'].url;
90105
}
91106
else if (data[key].hasOwnProperty('overview')) {
92107
if (data[key]['overview'].url.indexOf(`/${name}/overview/`) !== -1)
93108
overviewLink = data[key]['overview'].url;
109+
} else {
110+
overviewLink = data [key].url;
111+
if(overviewLink == undefined){
112+
if(key != "leftNavTitle")
113+
overviewLink = data [key] [Object.keys(data [key])[0]].url;
114+
else
115+
overviewLink = data[Object.keys(data).reverse()[0]].url;
116+
}
117+
94118
}
95119
})
96120

97121
return (
98122
<ul
99123
key={`${name}-${uuidv4()}`}
100-
className={` ${(active.indexOf(name) !== -1) ? 'active' : 'inactive'} ${isRoot ? ' root' : ''} `}
124+
className={` ${(this.state.expandedPanels?.indexOf(name) !== -1) ? 'active' : 'inactive'} ${isRoot ? ' root' : ''} `}
101125
>
102126
<li className={`parent${this.inUrl(`/${name}/`) ? ' currentUrl text_green' : ''}`} onClick={this.toggleActive} identifier={name}>
103-
<svg onClick={this.toggleActive} identifier={name} className={`inline float_left relative folder-icon parent_caret${this.isActive(name) ? ' active_parent_caret' : ''}`} xmlns="http://www.w3.org/2000/svg" fill="none" height="24"
127+
<svg onClick={(e)=>{this.toggleActive(e); this.toggleExpansion(name)}} identifier={name} className={`inline float_left relative folder-icon parent_caret${(this.state.expandedPanels?.indexOf(name) !== -1) ? ' active_parent_caret' : ''}`} xmlns="http://www.w3.org/2000/svg" fill="none" height="24"
104128
viewBox="0 0 24 24" width="24">
105129
<path clipRule="evenodd"
106130
d="m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z"
107131
fill="#333333" fillRule="evenodd">
108132

109133
</path>
110134
</svg>
111-
<svg onClick={this.toggleActive} identifier={name} className={`-mr-3 inline caret${this.isActive(name) ? ' active-caret' : ''}`} xmlns="http://www.w3.org/2000/svg" fill="none" height="24" viewBox="0 0 24 24" width="24"><path clipRule="evenodd" d="m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z" fill="#333333" fillRule="evenodd" /></svg>
135+
<svg onClick={(e)=>{this.toggleActive(e); this.toggleExpansion(name)}} identifier={name} className={`-mr-3 inline caret${this.isActive(name) ? ' active-caret' : ''}`} xmlns="http://www.w3.org/2000/svg" fill="none" height="24" viewBox="0 0 24 24" width="24"><path clipRule="evenodd" d="m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z" fill="#333333" fillRule="evenodd" /></svg>
112136
{ overviewLink && (<Link to={overviewLink} onClick={this.toggleActive} identifier={name}>{ data.leftNavTitle || name.replace(/-/g, ' ')} </Link>) }
113137
{ !overviewLink && (<button type="button" onClick={this.toggleActive} identifier={name}>
114138
{data.leftNavTitle || name.replace(/-/g, ' ')}

0 commit comments

Comments
 (0)