[Question]: How to Expand/Collapse Right Panel (Header Panel)

[AntonSRial]

Question for Carbon

Hi!

I'm trying to implement the Right Panel in my app but I can't find a way to collapse/expand this component. According to documentation, the panel is attached to a HeaderGlobalAction and it's visibility is controlled by the prop expanded. However, it's no example avaliable in the wiki of how to toggle the expand/collapse action.

Could you give me some advice? Thanks in regard.

Code of Conduct

• I agree to follow this project's Code of Conduct

[jnm2377]

Hi @AntonSRial to collapse and expand the HeaderPanel component, you'd need to use a state. Set the state value as the expanded prop value, and on HeaderGlobalAction click you would update that state to toggle the expansion.

Something like:

const [isExpanded, setIsExpanded] = useState(false);

const toggleExpand = ( ) => { 
setIsExpanded(!isExpanded)
}

<HeaderGlobalAction onClick={toggleExpand}> [icon] </HeaderGlobalAction>
<HeaderPanel expanded={isExpanded}> [panel items] </HeaderPanel>