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!

Dog Agility Training Near Me



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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