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

Solved General Discussion
  • I'm wondering how I can add a link or button to the dropdown that appears when you click your icon
    6a05ba77-f4f5-4657-9dc0-04617af0ee45-image.png
    Looking to add a discord link or something.

  • @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

  • 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

  • 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
    
    });
    
  • @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. 🙂

  • @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

  • @dogs It works great without ajaxify.end. Thanks


Suggested Topics


| | | |