Page 1 of 1

Opening topbar menu item from outside of the menu

Posted: 13 Sep 2021, 14:16
by aripdcom
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?

Re: Opening topbar menu item from outside of the menu

Posted: 17 Sep 2021, 10:42
by siris
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,

Re: Opening topbar menu item from outside of the menu

Posted: 17 Sep 2021, 14:23
by aripdcom
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,

Re: Opening topbar menu item from outside of the menu

Posted: 29 Sep 2021, 11:00
by mert.sincan
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,

Re: Opening topbar menu item from outside of the menu

Posted: 29 Sep 2021, 12:54
by aripdcom
event.stopPropagation(); worked well in my use case.
Thanks a lot

Re: Opening topbar menu item from outside of the menu

Posted: 30 Sep 2021, 12:41
by mert.sincan
Glad to hear, thanks a lot for the update!

Best Regards,