XF 2.1 p-nav-opposite (alert, conversation,...) as a widget

[Betclever]

Hello,

I would like to make a widget with following icons and links:


/conversations
/account/alerts

The goal is removing the opposite-bar and staffbar...

Thx

 

[Betclever]

I figured out but only for conversations, alerts, search but not for users, admin menu (moderators tools),.

<div class="p-navgroup-link p-navgroup-link--iconic">
<div class="p-navgroup-link p-navgroup-link">
    <a class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer" href="/conversations/">
        <i aria-hidden="true"></i>
    </a>

<div class=p-navgroup-link p-navgroup-link--iconic">
<div class="p-navgroup-link p-navgroup-link">
    <a class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer" href="/account/alerts/">
        <i aria-hidden="true"></i>
    </a>  
   
<div class="p-navgroup-link p-navgroup-link--iconic">
<div class="p-navgroup-link p-navgroup-link">
    <a class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search" href="/search/">
        <i aria-hidden="true"></i>
    </a>                                
                           
</div>
</div>
</div>
</div>
</div>
</div>

This part of code doesn't work... What's wrong please?

<div class="p-navgroup-link p-navgroup-link--iconic">
<div class="p-navgroup-link p-navgroup-link">
    <a class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search" href="/search/">
        <i aria-hidden="true"></i>
    </a>
   
    <div class="p-navgroup-link p-navgroup-link--iconic">
<div class="p-navgroup-link p-navgroup-link">
    <a class="p-navStaffBar p-navgroup-link p-navgroup-link-staffbar p-navgroup-link--iconic p-navgroup-link--moderatortools">
        <i aria-hidden="true"></i>
    </a>
</div>
</div>
</div>
</div>

Also, I would like to open them as overlay/popup...

Thx

 

[Nicolas FR]

I would like to open them as overlay/popup...

For this add data-xf-click="overlay" for each link <a ...

 

[Betclever]

For this add data-xf-click="overlay" for each link <a ...

Where do I have to put that code please?

 

[Nicolas FR]

    <a class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer" href="/conversations/" data-xf-click="overlay">
        <i aria-hidden="true"></i>
    </a>

 

[Betclever]

    <a class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer" href="/conversations/" data-xf-click="overlay">
        <i aria-hidden="true"></i>
    </a>

It works thanks.

Do you have an idea for the second part of the problem?

 

[Nicolas FR]

When you say it's not working, what is not working exactly ?

 

[Betclever]

When you say it's not working, what is not working exactly ?

I only have the first 3 icons instead of 5 on my widget