Aurelia: child router routes display in "main" nav-bar and child view in app.html <router-view> element?

Question

We want to have a sidebar menu and a "main" area. Depending on how you navigate, the sidebar's menu items will change, and a new view will be loaded into the "main" area.

I've created app.html with a <router-view> element, and a nav-bar.html that can display the main router's navigation. Let's say that I initially have "Administration" and "Reports" as routes (and therefore menu items). When a user clicks on "Administration", I'd like the menu to update to display child routes (say "Users" and "Settings") and have the admin view-model display in the app.html's <router-view>.

Initially I tried to create a child router, but then I have to have a new <router-view> inside of admin.html (the page won't even load without this). Instead, I want the admin.html view to display inside the <router-view> of app.html, and for the child routes to replace the "main" routes in the nav-bar menu.

In app.js I have the following router config:

this.router.configure((config) => {
    config.title = "Welcome";
    config.map([
        { route: "", moduleId: "welcom", nav: false, title: "Welcome" },
        { route: "reports", moduleId: "reports", nav: true, title: "Reports" },
        { route: "admin", moduleId: "users", nav: true, title: "Administration" },
    ]);
});

In users.js, I have this code:

this.router.configure((config) => {
    config.title = "Users";
    config.map([
        { route: "", moduleId: "users", nav: true, title: "Users" },
        { route: "settings", moduleId: "settings", nav: true, title: "Settings" },
    ]);
});

Initially, the menu should be:
- Administration
- Reports

and "welcome.html" should be the view in the <router-view> (the default route is 'welcome').

When the user clicks (navigates to) "Administration", the menu should refresh to be:
- Users - Settings

with "users.html" in the <router-view>.

However, in order to get this to work at all I need to have a further <router-view> in "users.html" and that's not really what I want (I want the view to load in the app.html's <router-view>).

Is there a way to achieve this in Aurelia? I've even tried injecting the parent router into the Admin constructor (using Parent.of(router) binding) and then router.addRoute(). The route gets added, but the menu doesn't update (even though it's data bound).

Answer 1

I created a sample using Aurelia that implements a hierarchical menu structure using a left-side menu.

Here are notes about the sample project

You can run the sample online to test it out

The multi-level menu sample shows how you can quickly create a hierarchical menu when building an Aurelia SPA website.

The multi-level menu helps users navigate through a hierarchy of pages.

It is easy to configure the routes and the hierarchy as shown below:

import aur = require("aurelia-router");
import mlmps = require("./MultiLevelMenuPipelineStep");

export class App {
    static inject = [aur.Router];

    constructor(public router: aur.Router) {
        this.router.configure((config) => {
            config.title = "Aurelia VS/TS";
            config.addPipelineStep("modelbind", mlmps.MultiLevelMenuPipelineStep);
            config.map([
                { route: ["", "home"], moduleId: "views/home", nav: true, title: "home", settings: { level: 0, show: true } },
                { route: ["item-1"], moduleId: "views/item-1", nav: true, title: "item 1", settings: { level: 0, show: true } },
                { route: ["item-1-1"], moduleId: "views/item-1-1", nav: true, title: "item 1.1", settings: { level: 1, show: false } },
                { route: ["item-1-2"], moduleId: "views/item-1-2", nav: true, title: "item 1.2", settings: { level: 1, show: false } },
                { route: ["item-2"], moduleId: "views/item-2", nav: true, title: "item 2", settings: { level: 0, show: true } },
                { route: ["item-2-1"], moduleId: "views/item-2-1", nav: true, title: "item 2.1", settings: { level: 1, show: false } },
                { route: ["item-2-2"], moduleId: "views/item-2-2", nav: true, title: "item 2.2", settings: { level: 1, show: false } },
                { route: ["item-2-2-1"], moduleId: "views/item-2-2-1", nav: true, title: "item 2.2.1", settings: { level: 2, show: false } },
                { route: ["item-2-2-2"], moduleId: "views/item-2-2-2", nav: true, title: "item 2.2.2", settings: { level: 2, show: false } },
                { route: ["item-2-3"], moduleId: "views/item-2-3", nav: true, title: "item 2.3", settings: { level: 1, show: false } }
            ]);
        });
    }
}

The level property is used to establish the hierarchy. The show property controls the visibility of the route in the menu. The router navigation pipeline step looks at the target navigation and sets the route visiblity accordingly. The navigation helper provides a button to navigate up a level from the current route, and invokes the corresponding navigation commmand to the router.