Hide Menu Links Based on Roles, Status or Logged in Users

This can natively have achieved by adding multiple rows in a layout and then protecting each of those rows based on the user role. Then I add a menu to each row and customize it based on what I want that user role to see, see photo. 

After assigning permission, we can get this working for the front end with the following steps.

Add the following code to the Login page's JavaScript tab.

$(function() {
    (function() {
        if (window.localStorage) {
            localStorage['cameFromLoginPage'] = true;
        }
    })();
});

Add the following code to the JavaScript tab of the destination page. 

$(function() {
    (function() {
        if (window.localStorage) {
            if (!localStorage.getItem('firstLoad') && localStorage['cameFromLoginPage']) {
                localStorage['firstLoad'] = true;
                localStorage.removeItem('cameFromLoginPage');
                window.location.reload();
            } else {
                localStorage.removeItem('firstLoad');
            }
        }
    })();
});

Original Community Post:

Hide menu links based on Roles, Status, or Logout/Login Users - Community Discussions / How Do I - Tadabase Community