Custom Menus

You can make a custom menu and still use the editable pages and Dashboard Designer within Mango.

The simple method is to first create a menu page such as this:

<div flex layout="column" layout-gt-md="row">
<ma-button raised="true" icon="home" label="Home" palette="primary" ui-sref="Page1"></ma-button>
<ma-button raised="true" label="Page 2" ui-sref="Page2"></ma-button>
<ma-button raised="true"  label="Page 3" ui-sref="Page3"></ma-button>
</div>

This menu links to three different pages.  These page need to have menu items with the corresponding ui-sref in the code but you can make the menu items invisible.

Now you can include this menu page within your other pages by adding this code at the top of the page where the xid is the xid of the menu page you created above.  Tip: to find the XID in the Page editor or Dashboard Designer click the view icon and then copy the XID from the URL.

<ma-ui-page-view id="diagram" xid="65a55f29-6efd-4bc8-85d4-48cb48194edf"></ma-ui-page-view>

Add this to each page and now you can edit the menu in just one place and it will be affected on each page using it.

A more advanced hybrid approach. Use a userModule.js file like this, you can add it from the UI settings page. This will add a parent state which you can then nest custom pages inside of. The myApp.home state etc will be nested inside the <div ui-view> element of the myApp state. The "page" that is linked to from the myApp state is the menu,

define(['angular', 'require'], function(angular, require) {
'use strict';

var userModule = angular.module('userModule', ['maUiApp']);

userModule.config(['maUiMenuProvider', (maUiMenuProvider) => {
    maUiMenuProvider.registerMenuItems([{
        name: 'myApp',
        url: '/my-app',
        template: '<ma-ui-page-view xid="65a55f29-6efd-4bc8-85d4-48cb48194edf"></ma-ui-page-view><div ui-view></div>',
        menuText: 'My app base',
        //menuHidden: true,
        abstract: true
    }]);
}]);

return userModule;

}); // define

Create pages as desired then add menu items for them, making sure to choose "My app base" as their parent and the "menu page" will be included automatically.