Adding a new topbar-menu

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
jepsar
Posts: 166
Joined: 03 Sep 2014, 11:41
Location: NL / BE
Contact:

18 Aug 2020, 16:09

I want to add a new topbar-menu (to toggle the application language). I was hoping I could use the existing classes and scripts, so I simply duplicated `<ul class="topbar-menu">` in the topbar.xhtml file. This kind of works, after adding the CSS rule `.layout-topbar .topbar-menu { float: left; }`. The only thing is that both menu's can be opened at the same time. After having looked at the layout.js file, I'm not so sure if multiple menu's are supported, because of only having a single `$this.topbarMenuClick` boolean.

Is having multiple menu's ment to be supported and am I doing something wrong here? Or should I throw in something like a selectOneMenu?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub: https://github.com/jepsar
Spotify: 90s Rave, Acid, Trance, House

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

21 Aug 2020, 10:45

should I throw in something like a selectOneMenu?
- This is related to your needs. I think you can do it with only one topbar-menu like;

Code: Select all

// topbar.xhtml
...
<div class="topbar-right">
    <ul class="topbar-menu">
        // other items
        <li class="language-item">
            <a tabindex="0">
                <i class="pi pi-home"></i>
                <span class="topbar-badge">2</span>
            </a>
            <ul class="language-menu">
                <li>
                    <a tabindex="0">
                        <i class="pi pi-home"></i>
                        EN
                    </a>
                </li>
                <li>
                    <a tabindex="0">
                        <i class="pi pi-home"></i>
                        TR
                    </a>
                </li>
            </ul>
        </li>
        // other items
    </ul>
</div>
Best Regards,

jepsar
Posts: 166
Joined: 03 Sep 2014, 11:41
Location: NL / BE
Contact:

21 Aug 2020, 11:02

Great, thank you so much! That at least leaves me with multiple options :D
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub: https://github.com/jepsar
Spotify: 90s Rave, Acid, Trance, House

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

21 Aug 2020, 12:26

Glad to hear, thanks a lot for the update ;)

jepsar
Posts: 166
Joined: 03 Sep 2014, 11:41
Location: NL / BE
Contact:

31 Mar 2021, 12:22

One small detail about the suggested solution is that the styling is off when using `language-item` and `language-menu`, so I reverted to using the profile classes. I think they could be more generic, like `topbar-right-item` and `topbar-right-menu` instead of `profile-name` and `profile-menu`.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub: https://github.com/jepsar
Spotify: 90s Rave, Acid, Trance, House

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

05 May 2021, 16:21

Hi,

Thanks a lot for your feedback! We'll pay attention to it.

Best Regards,

Post Reply

Return to “Diamond - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest