[Ejs-menu in sidebar navigation] - from 194451

[Ciprian-Catalin]

 I'm using a custom logic to open the sidebar when the user hover on the dockbar and when takes the cursor from it, the sidebar is closed. The issue appears when the user hovers for the first time on an icon, the sidebar is opened behind the ejs menu:

If the user moves the cursor again over another icon, the ejs menu fixes its position:

Also, because the mouseenter and mouseleave events are triggered on the sidebar container, when the user moves the cursor on the ejs menu, the sidebar closes:

this is the code for the custom hover functionality:

How to keep the sidebar open when the user navigates through the elements of the ejs menu, and close the sidebar only when the cursor is outside of the sidebar + ejs-menu?

Thank you!

[Subalakshmi Ramachandran]

Hi Ciprian,

Greetings from Syncfusion support.

We have understood that you are facing an issue while using the Sidebar with the Menu component. We suspect that the sidebar closes while cursor out is due to the mouseleave event where you call the hide method. We recommend you prevent the closing the sidebar by cancel the close in the close event of the Sidebar component.

[app.component.html]

<ejs-sidebar
      (close)="onSidebarClose()"
    (created)="onSidebarCreated()"
  >…….
  </ejs-sidebar>

[app.component.ts]

onSidebarClose(args: any) {
    args.cancel = true;
  }

API:
https://ej2.syncfusion.com/angular/documentation/api/sidebar#close
https://ej2.syncfusion.com/angular/documentation/api/sidebar/eventArgs/

If you have any further queries or require additional assistance, please get back to us.

Regards,
Suba R.

[Ciprian-Catalin]

Hello,

This solution is not working because in this case the sidebar will never be closed, the hover functionality doesn't work anymore, each time when the sideabar should be closed, the onSidebarClose method cancel the close event.

[SureshRajan Alagarsamy]

Hi Ciprian,

We have reviewed your query an understand that you have two concerns in the Sidebar component along with ContextMenu component. We suggest to check the below details to get answer for your queries.

Query 1 :Sub menu items opening in wrong position upon sidebar opening.

Based on the details you shared, we have investigated the reported issue. The behavior occurs because the Sidebar toggle and menu open/close actions are triggered by the hover action on the menu items. When you hover over a menu item inside the Sidebar, the context menu opens first, followed by the Sidebar opening on hover.

To resolve this issue, we recommend opening the menu items on item click instead of hover. You can achieve this by setting the showItemOnClick property to true. This will allow the Sidebar to open on hover, while the menu items will open on click.

Refer to the below code snippet for further reference.

[app.component.html]

 

<ejs-menu

  #menuObj

  id="dockMenu"

  .....

  [showItemOnClick]="true"

  >

</ejs-menu>

 

Sample : https://stackblitz.com/edit/angular-6xhwwv-eoeqkm?file=src%2Fapp.component.html

Query 2: How to keep the Sidebar open when navigating through the ejs-menu items and close it only when the cursor is outside of both the Sidebar and ejs-menu.

If you want to keep the Sidebar open while interacting with sub-menu items, we suggest removing the open/close functionality triggered by the mouseleave and mouseenter events. Instead, you can toggle the Sidebar using actions outside of the Sidebar component.

We have already similar examples available in our sample browser demos.

Demos : https://ej2.syncfusion.com/angular/demos/#/fluent2/sidebar/sidebar-menu

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suresh.