Opening topbar menu item from outside of the menu

Post Reply
aripdcom
Posts: 8
Joined: 23 Dec 2016, 09:14

13 Sep 2021, 14:16

Hi,
During implementation of shepherdjs to our web app, i would like to trigger the profile-item submenu open. As I understand, to open and close menu is just add and remove class operation. Here is my problem.

I use Avalon 3.0.1. I can handle it by adding and removing css classes if i disable line 250 in layout.js. But this time topbar menu is not working as expected, submenu is not closed.

layout.js line 249-251:

Code: Select all

if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
  $this.topbarItems.find('.active-top-menu').removeClass('active-top-menu');
}
opening submenu

Code: Select all

const item = $('body > .layout-wrapper .topbar .topbar-items li.profile-item');
const submenu = $('body > .layout-wrapper .topbar .topbar-items li.profile-item ul');
item.addClass('active-top-menu');
submenu.addClass('fadeInDown');
closing submenu

Code: Select all

const item = $('body > .layout-wrapper .topbar .topbar-items li.profile-item');
const submenu = $('body > .layout-wrapper .topbar .topbar-items li.profile-item ul');
item.removeClass('active-top-menu');
submenu.removeClass('fadeInDown');
I think line 250 removes active-top-menu class after adding it to open submenu. That's the reason why i cannot see the submenu opened.
How can i resolve this? Any idea?

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

17 Sep 2021, 10:42

Hi,

Unfortunately, I couldn't understand your issue. Why you don't use current layout.js? and what you want about profile menu. Please explain in more detail with what do you want to do.

Best Regards,

aripdcom
Posts: 8
Joined: 23 Dec 2016, 09:14

17 Sep 2021, 14:23

Hi,
Sorry for not explaining clearly. I am sharing a screen shot and an example below link. What I'm trying to do is open the "user profile menu" also with a link on the page. If I can achieve this, then I can adapt it to shepherdjs.

https://we.tl/t-k5i0VotQ10

Thanks,

mert.sincan
Posts: 4765
Joined: 29 Jun 2013, 12:38

29 Sep 2021, 11:00

Hi,

I think you can try event.stopPropagation(); or setTimeout

Code: Select all

const item = $('body > .layout-wrapper .topbar .topbar-items li.profile-item');
const submenu = $('body > .layout-wrapper .topbar .topbar-items li.profile-item ul');
item.addClass('active-top-menu');
submenu.addClass('fadeInDown');
event.stopPropagation();

Code: Select all

setTimeout(function() {
const item = $('body > .layout-wrapper .topbar .topbar-items li.profile-item');
const submenu = $('body > .layout-wrapper .topbar .topbar-items li.profile-item ul');
item.addClass('active-top-menu');
submenu.addClass('fadeInDown');
}, 0);
Best Regards,

aripdcom
Posts: 8
Joined: 23 Dec 2016, 09:14

29 Sep 2021, 12:54

event.stopPropagation(); worked well in my use case.
Thanks a lot

mert.sincan
Posts: 4765
Joined: 29 Jun 2013, 12:38

30 Sep 2021, 12:41

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Avalon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests