I'm currently working on creating a list with bootstrap-Accordion using react-bootstrap. I'm applying a background color and border left to the selected item.
The problem I'm facing is:
Whenever I activate a bar, the text shifts to the right, causing misalignment. I'm not sure how to fix this issue.
return (
<div>
<div className={props.trigger_value ? "sidebar" : "sidebar_shrink"}>
<hr></hr>
<Accordion className="menue_group">
{data_json.map((item, index) => (
<>
<CustomToggle
eventKey={index}
handleClick={() => {
if (activeKey === index) {
setActiveKey(null);
setmenue_active(activeKey);
} else {
setActiveKey(index);
setmenue_active(index);
}
}}
>
{item.menu}
{item.submenu ? (
activeKey === index ? (
<i className="fas fa-angle-down float-right pr-3"></i>
) : (
<i className="fas fa-angle-up float-right pr-3"></i>
)
) : null}
</CustomToggle>
<div className="container-fluid">
{item.submenu &&
item.submenu.map((li, index1) => (
<Accordion.Collapse eventKey={index}>
<div key={index1}>
<div
className={
index1 === activeKey_submenu
? "submenue submenue_active container"
: "submenue container"
}
onClick={() => subMenue_click(index1)}
>
{li.menu}
</div>
</div>
</Accordion.Collapse>
))}
</div>
</>
))}
</Accordion>
<button className="btn btn-primary" onClick={props.triger_sidebar}>
test
</button>
</div>
</div>
);