Aurelia and Multiple Levels of Navigation

Question

I'm building Aurelia app and I have a top navigation for my app built using the router for high level navigation. I also need a separate side navigation for different sections of my app (per-directory).

For instance I have a users section on the site which will have multiple pages (views and view models) in it for different functionality and I need that users section to have it's own side navigation. I would like to have a separate router and navigation side bar per section. The getting started guide shows a child router scenario, but it's only on a given page.

I'd like my app structure to look something like this:

+src
    +users
      - home.js
      - home.html
      - users-nav-bar.html (this is what I'm unsure how set up)
      - users-nav-bar.js
      - users-router.js (not sure if this is possible)
      - user-profile.html
      - user-profile.js
      - user-roles.html
      - user-roles.js
    +cases
      - case-nav-bar.html
      - case-nav-bar.js
      etc...

Is this possible with Aurelia? Is there another/better way to structure a side nav-bar per section of the app? Can anyone point me to an example?

yes, it is possible! That is one of the features of "Web Components Architecture" — Fabio Luz
Do you know of any examples of how to set up the routing and navigation this way? — Don Fitz
I don't know any example. Show us what you've tried so far, maybe somebody can give you a light — Fabio Luz

freud freud · Accepted Answer · 2015-12-09T22:28:32

Definitely possible, I have it working in my sample app. Here is what I have done. Note that this is just a child router\navigation, I have separate nav-bar for the whole app, and this router\navigation is displayed only if the user clicks on the profile page.

//profile.js

export class Profile {

//Business logic related stuff, interact with services, etc
//then
configureRouter(config, router){
    config.map([
        {
            route:["","about-me"] , 
            moduleId:"profile/about-me", 
            title: "About Me",
            name : "about-me",
            nav:true
        },

        {
            route:"my-travels", 
            moduleId:"profile/my-travels", 
            title: "My Travels",
            name :"my-travels",
            nav:true
        },

    ]);
    this.router = router;
}

}

//profile.html
<div class="panel panel-body">
    <div class="wizard text-center">
        <a repeat.for="row of router.navigation"
           class="${row.isActive ? 'active' : ''}"
           href.bind="row.href">${row.title}</a>
    </div>
    <router-view></router-view>
</div>

So without seeing the code, I can only offer suggestions.

Don't worry about having a separate navbar and router class for each child section. for instance, users-navbar and users-router does not sound right to me (again, I am guessing without seeing the code) but if you have just a users.html and and a users.js, you can include your view-model logic AND router information within users.js. Then all users.html does is loop through the configured routes and display a navigation menu. So unless the user clicks on the link which gets him\her to the users page, that navigation menu will not be visible.

Aurelia and Multiple Levels of Navigation

1 Answers