From a9c89f920bdb54b16cf33948229dc141d14dcc60 Mon Sep 17 00:00:00 2001 From: Santhoshkumar R Date: Mon, 22 May 2023 19:21:19 +0530 Subject: [PATCH] WEB-460 - Fixed Left-nav toggle expansion issue --- src/components/LeftNav.jsx | 27 ++++++++++++++------------- src/components/LeftNav.scss | 1 - src/pages/tutorials/index.jsx | 6 +++--- src/templates/page.jsx | 4 ++-- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/LeftNav.jsx b/src/components/LeftNav.jsx index 70aedb0..01d9660 100644 --- a/src/components/LeftNav.jsx +++ b/src/components/LeftNav.jsx @@ -15,14 +15,17 @@ class ListItem extends React.Component { constructor(props) { super(props); - const { data, isRoot } = this.props; + const { data, isRoot, identifier } = this.props; this.state = { data, isRoot, + identifier, active: [], currentUrl: '', + expandedPanels: [], }; this.toggleActive = this.toggleActive.bind(this); + this.toggleExpansion = this.toggleExpansion.bind(this); // Bind toggleExpansion method } componentDidMount() { @@ -30,24 +33,23 @@ class ListItem extends React.Component { } setActive = (name) => { - const { active } = this.state; + const {active, expandedPanels} = this.state; if (active.indexOf(name) === -1) { - this.setState((prev) => ({ active: [...prev.active, name] })); - const { expandedPanels } = this.state; - if(!expandedPanels){ - this.setState(() => ({ expandedPanels: [ name] })); + this.setState((prev) => ({active: [...prev.active, name]})); + if (!expandedPanels.includes(name)) { // Check if name is already in expandedPanels + this.setState((prev) => ({expandedPanels: [...prev.expandedPanels, name]})); } } - } // sets a given list item as active + }; toggleExpansion(identifier) { const { expandedPanels } = this.state; - if (expandedPanels?.indexOf(identifier) === -1) { + if (expandedPanels.includes(identifier)) { + const updatedExpandedPanels = expandedPanels.filter((panel) => panel !== identifier); + this.setState({ expandedPanels: updatedExpandedPanels }); + } else { this.setState((prev) => ({ expandedPanels: [...prev.expandedPanels, identifier] })); - } else if(expandedPanels){ - expandedPanels.splice(expandedPanels.indexOf(identifier), 1); - this.setState(() => ({ expandedPanels: [...expandedPanels] })); } } @@ -121,7 +123,7 @@ class ListItem extends React.Component { return (