How would one add an option/button to the user dropdown menu?

dunlix

I'm wondering how I can add a link or button to the dropdown that appears when you click your icon

Looking to add a discord link or something.

dogs

@dunlix

$(document).ready(function() {

    var link_to_discord_server = "https://google.com";

    var element = '<li><a href="' + link_to_discord_server + '" class="user-status"><i class="fa fa-comment"></i> Discord</a></li>';

    if ($('ul#user-control-list li[role="presentation"]:first').length) {

        $(element).insertAfter('ul#user-control-list li[role="presentation"]:first');

    }


});

Result:

discord link demo

dunlix

The thing is I have a discord link in my navbar, but it takes up a lot of space, so i'd like to put in in the user menu

dogs

Hey @dunlix

You could fork the persona-theme and edit that specific template: templates/partials/menu.tpl located at theme-persona.

Snippet:

<li>
   <a component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
   <i class="fa fa-fw fa-edit"></i> <span>[[user:edit-profile]]</span>
   </a>
</li>
<li>
   <a component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
   <i class="fa fa-fw fa-gear"></i> <span>[[user:settings]]</span>
   </a>
</li>

If you do that, only your template would be replaced. The rest is inherited from the original theme an will stay the same.

If you looking for a quick & dirty solution, you could add custom JS to insert your discord link in that menu.

$(window).on('action:ajaxify.end', function(data) {
    
    // add discord link to menu dropdown

});

dunlix

@dogs what would I put where you say "// add discord link..." I'm not sure what to put. Should have mentioned I'm a noob.

dogs

@dunlix

$(document).ready(function() {

    var link_to_discord_server = "https://google.com";

    var element = '<li><a href="' + link_to_discord_server + '" class="user-status"><i class="fa fa-comment"></i> Discord</a></li>';

    if ($('ul#user-control-list li[role="presentation"]:first').length) {

        $(element).insertAfter('ul#user-control-list li[role="presentation"]:first');

    }


});

Result:

discord link demo

dunlix

@dogs It works great without ajaxify.end. Thanks