Fixed the issue of collapse/expand according to change by `open` state for SubMenu

[hepter]

Description

When the open state changed, the collapse/expand animation was not occurring and it wasn't being displayed correctly. Along with fixing this feature, I have also provided the ability to collapse other menus when one menu is expanded. Especially when there are many menu items, the importance of being able to automatically collapse the others increases.

I had to fix this solution quickly for myself. I also believe that a better PR change that solves this problem can be made.

Fixes # (issue) Fixed the issue of collapse/expand according to change by open state for SubMenu

Type of change

• [x] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Refactoring / enhancement

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

[code4cake]

Hey @hepter I think this fixes this issue https://github.com/azouaoui-med/react-pro-sidebar/issues/180, am I correct to assume this??

[hepter]

Hey @hepter I think this fixes this issue #180, am I correct to assume this??

@code4cake Yes that's right. sandbox

[code4cake]

aaah man @hepter thanks man, i hope your change will be merge soon. I'm trying to implement the fix that you had, but I'm having problems extracting that logic when you have multiple levels of nested accordeons?

    <RProMenu menuItemStyles={themaMenuItemStyle}>
        <RProSubMenu
          open={open}
          key={omgevingscheckItem.code}
          label={omgevingscheckItem.naam}
          rootStyles={themaSubItemStyle}
          onClick={() => {
            handleResetFeatureAndCloseSheet();
            handleResetGeselecteerdeLaag();
          }}
          onOpenChange={onOpenChange}
        >

        // this is also a another SubMenu

            <ThemaAccordeonItems omgevingscheckItem={omgevingscheckItem} />
        </RProSubMenu>

I would like to extract that logic

  const [openSubMenu, setOpenSubMenu] = useState("");

  const handleOpenChange = (subMenuKey) => () => {
    setOpenSubMenu((prev) => (prev === subMenuKey ? "" : subMenuKey));
  };

to a context that I could use overall over my app and that will apply to multiple levels of accordions in different components ?

[hepter]

So, after the error correction process here, the change in the 'onOpenChange' event ensures the correct change of the 'open' value. I did not encounter any problems in its nested operation. The management of state in the case of being nested is now related to how the developer wants to do it. If you're getting an error due to the component in the scenario you want to make, you can share the scenario you want to recreate on codesandbox or similar.

[asmabee07]

Hey @hepter I think this fixes this issue #180, am I correct to assume this??

@code4cake Yes that's right. sandbox

Hello @hepter, I have gone through this sandbox and understood, your logic seems well executed. I have a query here you have the same MenuItems for 5 SubMenus but in my scenario, I have 5 different categories that can be termed as 5 SubMenus, and all the categories consisting different MenuItems, that's why in this case I cannot loop through the MenuItems. So please if you can help me with the logic.

[code4cake]

So, after the error correction process here, the change in the 'onOpenChange' event ensures the correct change of the 'open' value. I did not encounter any problems in its nested operation. The management of state in the case of being nested is now related to how the developer wants to do it. If you're getting an error due to the component in the scenario you want to make, you can share the scenario you want to recreate on codesandbox or similar.

@hepter you are right,, let me create a sandbox that will better explain the logic. I'll work on it this weekend.

[code4cake]

Hey @hepter I think this fixes this issue #180, am I correct to assume this??

@code4cake Yes that's right. sandbox

Hello @hepter, I have gone through this sandbox and understood, your logic seems well executed. I have a query here you have the same MenuItems for 5 SubMenus but in my scenario, I have 5 different categories that can be termed as 5 SubMenus, and all the categories consisting different MenuItems, that's why in this case I cannot loop through the MenuItems. So please if you can help me with the logic.

@asmabee07 can you create a sandbox to better see the problem, i think it could help?

[asmabee07]

Hey @hepter I think this fixes this issue #180, am I correct to assume this??

@code4cake Yes that's right. sandbox

Hello @hepter, I have gone through this sandbox and understood, your logic seems well executed. I have a query here you have the same MenuItems for 5 SubMenus but in my scenario, I have 5 different categories that can be termed as 5 SubMenus, and all the categories consisting different MenuItems, that's why in this case I cannot loop through the MenuItems. So please if you can help me with the logic.

@asmabee07 can you create a sandbox to better see the problem, i think it could help?

Please find the demo link here in SandBox

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[suhas86]

Will this be merged any time soon?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.