Topic: Sidenav Toggle Button Behavior
Herzmann priority asked 7 months ago
Expected behavior
I have a SidenavItem that's supposed to navigate to a page but also be togglable for subpages underneath. I want it so that when I click on the spinning icon, it toggles the subpages (collapses them), whereas if I click on the left side of it, it navigates to that page.
Actual behavior
No matter where I click on this item, it both toggles the subpages, AND navigates to the page it's supposed to. How can I separate the behavior of these?
Grzegorz Bujański staff answered 6 months ago
Try something like this:
const [basicCollapse1, setBasicCollapse1] = useState(true);
const handleClick = (e) => {
if (e.target.tagName === 'I') {
e.preventDefault();
setBasicCollapse1(!basicCollapse1);
}
}
...
<MDBSideNavLink
tag={Link}
to='/url'
icon='angle-down'
shouldBeExpanded={basicCollapse1}
onClick={(e) => handleClick(e)}
>
<MDBIcon fas icon='grin' className='fa-fw me-3'/>
<span className='sidenav-non-slim'>Category 1</span>
</MDBSideNavLink>
Anthony101990Jones free answered 6 months ago
It sounds like you want to create a SidenavItem that behaves differently when clicked on different parts of it. Specifically, you want the spinning icon to toggle subpages, while clicking on the left side should navigate to a page.
Let’s explore some approaches to achieve this behavior:
*Event Delegation:*You can use event delegation to handle different click behaviors based on the target element.Attach a single click event listener to the parent container (the SidenavItem), and then check the target element within the event handler.If the target is the spinning icon, toggle the subpages; otherwise, navigate to the page.
*Separate Click Areas:*Create two separate clickable areas within your SidenavItem:The left side for navigation (e.g., a link or button).The spinning icon for toggling subpages (e.g., a separate button or icon).Attach different event listeners to these areas to handle their respective behaviors.
*Custom Event Handling:*Implement custom event handling logic within your SidenavItem component.When the user clicks on the spinning icon, trigger a custom event (e.g., “toggleSubpages”).When the user clicks on the left side, trigger another custom event (e.g., “navigateToPage”).In your parent component, listen for these custom events and handle them accordingly.
Remember to adapt these approaches to your specific framework or library (e.g., Angular, React, Vue) and adjust the implementation based on your existing code structure. By separating the click behaviors, you can achieve the desired interaction for your SidenavItem!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 7.2.0
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: No