How to make a user to view profile/logout by clicking on lightning:menuItem in a Napili community

Question

I am working on a Lightning Component which is being used as a header component in the Napili template. I am implementing a User details drop-down menu using standard lightning:buttonMenu with two lightning:menuItem(Profile, Logout). In the component's Js class, I was able to get the value of the buttonMenu, but I am not sure how to implement the functionality(clicking on Profile should open user profile and Logout should be able to logout the user successfully).

LtngCmp.cmp

<lightning:buttonMenu iconName="utility:down" name="Menu" alternativeText="Settings" iconSize="small" onselect="{! c.handleMenuSelect }">
                        <lightning:menuItem label="Profile" value="Profile"/>
                        <lightning:menuItem label="Logout" value="Logout"/>
</lightning:buttonMenu>

LtngCmpController.js

handleMenuSelect: function(cmp, event, helper) {
var selectedMenuItemValue = event.getParam("value");

How can I make the menu items navigate appropriately?

Please let me know of any available resources or ways implementation.

Answer 1

Use naviage to url functionality on click of each menu item:

<lightning:menuItem label="Profile" value="Profile" onfocus="{!c.goToProfile}"/>

Controller:

goToProfile:function(cmp,event,helper){
  helper.navigateToPage(profileURL);
}

Helper:

navigateToPage : function(url) {    
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
            "url": url,
            "isredirect": true,
        });
        urlEvent.fire();        
    },