AustinBrunkhorst/app.html

## app.html
<template>
  <require from="resources-elements-nav-menu.html" as="nav-menu"></require>
  <nav-menu router.bind="router"></nav-menu>
  <h1>Aurelia Menu with Child Routes example</h1>
  <div>
    <router-view></router-view>
  </div>
</template>

## app.js
import { inject } from 'aurelia-framework';
import { Router, RouterConfiguration, RouteConfig, NavModel } from 'aurelia-router';
import { relativeToFile } from 'aurelia-path';
import { CompositionEngine, CompositionContext } from 'aurelia-templating';
import { Origin } from 'aurelia-metadata';

@inject( CompositionEngine )
export class App {
    constructor(compositionEngine) {
        this.compositionEngine = compositionEngine;
    }

    configureRouter(config, router) {
        config.title = 'Child Route Menu Example';

        config.map( [
            { route: ['', 'home'], name: 'home',  moduleId: 'routes-home-index',  nav: true, title: 'Home' },
            { route: 'cats',       name: 'cats',  moduleId: 'routes-cats-index',  nav: true, title: 'Cats' },
            { route: 'dogs',       name: 'dogs',  moduleId: 'routes-dogs-index',  nav: true, title: 'Dogs' },
            { route: 'birds',      name: 'birds', moduleId: 'routes-birds-index', nav: true, title: 'Birds' }
        ] );

        this.router = router;
    }

    attached() {
        return this.mapNavigation( this.router );
    }

    mapNavigation(router, config) {
        const promises = [ ];
        const c = config ? config : { route: null };

        router.navigation.forEach( nav => {
            if (c.route !== nav.config.route) {
                promises.push( this.mapNavigationItem( nav, router ) );
            } else {
                promises.push( Promise.resolve( nav ) );
            }
        } );

        return Promise.all( promises );
    }

    mapNavigationItem(nav, router) {
        const config = nav.config;
        const navModel = nav;

        if (config.moduleId) {
            const childContainer = router.container.createChild();

            const instruction = {
                viewModel: relativeToFile( config.moduleId, Origin.get( router.container.viewModel.constructor ).moduleId ),
                childContainer: childContainer,
                view: config.view || config.viewStrategy,
            };

            return this.compositionEngine
                .ensureViewModel( instruction )
                .then( context => {
                    if ('configureRouter' in context.viewModel) {
                        const childRouter = new Router( childContainer, router.history );
                        const childConfig = new RouterConfiguration();

                        context.viewModel.configureRouter( childConfig, childRouter );
                        childConfig.exportToRouter( childRouter );

                        childRouter.navigation.forEach( nav => {
                            nav.href = `${navModel.href}/${nav.config.href ? nav.config.href : nav.config.name}`;
                        } );

                        return this.mapNavigation( childRouter, config  )
                                   .then( r => navModel.navigation = r )
                                   .then( () => navModel );
                    }

                    return navModel;
                } );
        }

        return Promise.resolve( navModel );
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## resources-elements-nav-menu.html
<template bindable="router">
  <require from="resources-elements-nav-menu.html" as="nav-menu"></require>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title} ${row.isActive ? 'active' : ''}</a>
      <nav-menu if.bind="row.navigation" router.bind="row"></nav-menu>
    </li>
  </ul>
</template>

## routes-birds-breeds-index.html
<template>
  <h3>Breeds</h3>
</template>

## routes-birds-breeds-index.js
export class Breeds {

}

## routes-birds-care-index.html
<template>
  <h3>Care</h3>
</template>

## routes-birds-care-index.js
export class Care {

}

## routes-birds-index.html
<template>
  <h2>Birds Page</h2>
  <router-view></router-view>
</template>

## routes-birds-index.js
import { RouterConfiguration, Router } from 'aurelia-router';

export class Birds {
  configureRouter(config, router) {
    config.title = "Birds";
    config.map([
      { route: ['', 'care'],   name: 'care',   moduleId: 'routes-birds-care-index',   nav: true, title: 'Caring' },
      { route: 'breeds', name: 'breeds', moduleId: 'routes-birds-breeds-index', nav: true, title: 'Breeds' },
      { route: 'toys',   name: 'toys',   moduleId: 'routes-birds-toys-index',   nav: true, title: 'Toys' },
    ]);
  }
}

## routes-birds-toys-index.html
<template>
  <h3>Toys</h3>
</template>

## routes-birds-toys-index.js
export class Toys {

}

## routes-cats-breeds-index.html
<template>
  <h3>Breeds</h3>
</template>

## routes-cats-breeds-index.js
export class Breeds {

}

## routes-cats-care-index.html
<template>
  <h3>Care</h3>
</template>

## routes-cats-care-index.js
export class Care {

}

## routes-cats-index.html
<template>
  <h2>Cats Page</h2>
  <router-view></router-view>
</template>

## routes-cats-index.js
import { RouterConfiguration, Router } from 'aurelia-router';

export class Cats {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = "Cats";
    config.map([
      { route: ['', 'care'],   name: 'care',   moduleId: 'routes-cats-care-index',   nav: true, title: 'Caring' },
      { route: 'breeds', name: 'breeds', moduleId: 'routes-cats-breeds-index', nav: true, title: 'Breeds' },
      { route: 'toys',   name: 'toys',   moduleId: 'routes-cats-toys-index',   nav: true, title: 'Toys' },
    ]);
  }
}

## routes-cats-toys-index.html
<template>
  <h3>Toys</h3>
</template>

## routes-cats-toys-index.js
export class Toys {

}

## routes-dogs-breeds-golden-retriever-index.html
<template>
  <h3>Golden Retriever</h3>
</template>

## routes-dogs-breeds-golden-retriever-index.js
export class GoldenRetriever {

}

## routes-dogs-breeds-index.html
<template>
  <h3>Breeds</h3>
  <router-view></router-view>
</template>

## routes-dogs-breeds-index.js
import { RouterConfiguration, Router } from 'aurelia-router';

export class Breeds {
  configureRouter(config, router) {
    config.title = "Breeds";
    config.map([
      { route: ['', 'golden-retriever'],   name: 'golden-retriever',   moduleId: 'routes-dogs-breeds-golden-retriever-index',   nav: true, title: 'Golden Retriever' },
    ]);
  }
}

## routes-dogs-care-index.html
<template>
  <h3>Care</h3>
</template>

## routes-dogs-care-index.js
export class Care {

}

## routes-dogs-index.html
<template>
  <h2>Dogs Page</h2>
  <router-view></router-view>
</template>

## routes-dogs-index.js
import { RouterConfiguration, Router } from 'aurelia-router';

export class Dogs {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = "Dogs";
    config.map([
      { route: ['', 'care'],   name: 'care',   moduleId: 'routes-dogs-care-index',   nav: true, title: 'Caring' },
      { route: 'breeds', name: 'breeds', moduleId: 'routes-dogs-breeds-index', nav: true, title: 'Breeds' },
      { route: 'toys',   name: 'toys',   moduleId: 'routes-dogs-toys-index',   nav: true, title: 'Toys' },
    ]);
  }
}

## routes-dogs-toys-index.html
<template>
  <h3>Toys</h3>
</template>

## routes-dogs-toys-index.js
export class Toys {

}

## routes-home-index.html
<template>
  <h1>Home</h1>
</template>

## routes-home-index.js
export class Home {

}
	<template>
	<require from="resources-elements-nav-menu.html" as="nav-menu"></require>
	<nav-menu router.bind="router"></nav-menu>
	<h1>Aurelia Menu with Child Routes example</h1>
	<div>
	<router-view></router-view>
	</div>
	</template>
	import { inject } from 'aurelia-framework';
	import { Router, RouterConfiguration, RouteConfig, NavModel } from 'aurelia-router';
	import { relativeToFile } from 'aurelia-path';
	import { CompositionEngine, CompositionContext } from 'aurelia-templating';
	import { Origin } from 'aurelia-metadata';

	@inject( CompositionEngine )
	export class App {
	constructor(compositionEngine) {
	this.compositionEngine = compositionEngine;
	}

	configureRouter(config, router) {
	config.title = 'Child Route Menu Example';

	config.map( [
	{ route: ['', 'home'], name: 'home', moduleId: 'routes-home-index', nav: true, title: 'Home' },
	{ route: 'cats', name: 'cats', moduleId: 'routes-cats-index', nav: true, title: 'Cats' },
	{ route: 'dogs', name: 'dogs', moduleId: 'routes-dogs-index', nav: true, title: 'Dogs' },
	{ route: 'birds', name: 'birds', moduleId: 'routes-birds-index', nav: true, title: 'Birds' }
	] );

	this.router = router;
	}

	attached() {
	return this.mapNavigation( this.router );
	}

	mapNavigation(router, config) {
	const promises = [ ];
	const c = config ? config : { route: null };

	router.navigation.forEach( nav => {
	if (c.route !== nav.config.route) {
	promises.push( this.mapNavigationItem( nav, router ) );
	} else {
	promises.push( Promise.resolve( nav ) );
	}
	} );

	return Promise.all( promises );
	}

	mapNavigationItem(nav, router) {
	const config = nav.config;
	const navModel = nav;

	if (config.moduleId) {
	const childContainer = router.container.createChild();

	const instruction = {
	viewModel: relativeToFile( config.moduleId, Origin.get( router.container.viewModel.constructor ).moduleId ),
	childContainer: childContainer,
	view: config.view \|\| config.viewStrategy,
	};

	return this.compositionEngine
	.ensureViewModel( instruction )
	.then( context => {
	if ('configureRouter' in context.viewModel) {
	const childRouter = new Router( childContainer, router.history );
	const childConfig = new RouterConfiguration();

	context.viewModel.configureRouter( childConfig, childRouter );
	childConfig.exportToRouter( childRouter );

	childRouter.navigation.forEach( nav => {
	nav.href = `${navModel.href}/${nav.config.href ? nav.config.href : nav.config.name}`;
	} );

	return this.mapNavigation( childRouter, config )
	.then( r => navModel.navigation = r )
	.then( () => navModel );
	}

	return navModel;
	} );
	}

	return Promise.resolve( navModel );
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<h2>Birds Page</h2>
	<router-view></router-view>
	</template>
	import { RouterConfiguration, Router } from 'aurelia-router';

	export class Birds {
	configureRouter(config, router) {
	config.title = "Birds";
	config.map([
	{ route: ['', 'care'], name: 'care', moduleId: 'routes-birds-care-index', nav: true, title: 'Caring' },
	{ route: 'breeds', name: 'breeds', moduleId: 'routes-birds-breeds-index', nav: true, title: 'Breeds' },
	{ route: 'toys', name: 'toys', moduleId: 'routes-birds-toys-index', nav: true, title: 'Toys' },
	]);
	}
	}
	<template>
	<h2>Cats Page</h2>
	<router-view></router-view>
	</template>
	import { RouterConfiguration, Router } from 'aurelia-router';

	export class Cats {
	configureRouter(config: RouterConfiguration, router: Router) {
	config.title = "Cats";
	config.map([
	{ route: ['', 'care'], name: 'care', moduleId: 'routes-cats-care-index', nav: true, title: 'Caring' },
	{ route: 'breeds', name: 'breeds', moduleId: 'routes-cats-breeds-index', nav: true, title: 'Breeds' },
	{ route: 'toys', name: 'toys', moduleId: 'routes-cats-toys-index', nav: true, title: 'Toys' },
	]);
	}
	}
	<template>
	<h3>Breeds</h3>
	<router-view></router-view>
	</template>
	import { RouterConfiguration, Router } from 'aurelia-router';

	export class Breeds {
	configureRouter(config, router) {
	config.title = "Breeds";
	config.map([
	{ route: ['', 'golden-retriever'], name: 'golden-retriever', moduleId: 'routes-dogs-breeds-golden-retriever-index', nav: true, title: 'Golden Retriever' },
	]);
	}
	}
	<template>
	<h2>Dogs Page</h2>
	<router-view></router-view>
	</template>