NetzwergX/app.html

## app.html
<template>
  <require from="components/navigation.html"></require>
  <h1>Aurelia Router Demo</h1>
  <navigation router.bind="router" class="primary-navigation"></navigation>
  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

## app.js
export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      {route: ['', 'home'], name: 'home', moduleId: 'home/home', nav: true, title: 'Home'},
      {route: 'profile', name: 'profile', moduleId: 'profile/profile', nav: true, title: 'Profile'},
      {route: 'settings', name: 'settings', moduleId: 'settings/settings', nav: true, title: 'Settings'}
    ]);
    this.router = router;
  }
}

## components\navigation.html
<template bindable="router">
  <nav>
    <ul>
      <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a href.bind="row.href">${row.title}</a>
      </li>
    </ul>
  </nav>
</template>

## home\home.html
<template>
  <h2>Home</h2>
</template>

## home\home.js
export class Home {

}

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

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-dialog');

  aurelia.start().then(() => aurelia.setRoot());
}

## profile\account\account.html
<template>
  <require from="components/navigation.html"></require>
  <navigation router.bind="router" class="tertiary-navigation"></navigation>
  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

## profile\account\account.js
export class Account {
  configureRouter(config, router) {
    config.map([
      { route: '', redirect: 'username' },
      { route: 'username', name: 'username', moduleId: 'profile/account/username/username', nav: true, title: 'Username' },
      { route: 'password', name: 'password', moduleId: 'profile/account/password/password', nav: true, title: 'Password' }
    ]);
    this.router = router;
  }
}

## profile\account\password\password.html
<template>
  <h2>Password</h2>
</template>

## profile\account\password\password.js
export class Password {

}


## profile\account\username\username.html
<template>
  <h2>Username</h2>
</template>

## profile\account\username\username.js
export class Username {

}

## profile\emails\emails.html
<template>
  <h2>Emails</h2>
</template>

## profile\emails\emails.js
export class Emails {

}

## profile\notifications\notifications.html
<template>
  <h2>Notifications</h2>
</template>

## profile\notifications\notifications.js
export class Notifications {

}

## profile\profile.html
<template>
  <require from="components/navigation.html"></require>
  <navigation router.bind="router" class="secondary-navigation"></navigation>
  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

## profile\profile.js
export class Profile {
  configureRouter(config, router) {
    config.map([
      { route: '', redirect: 'account' },
      { route: 'account', name: 'account', moduleId: 'profile/account/account', nav: true, title: 'Account' },
      { route: 'emails', name: 'emails', moduleId: 'profile/emails/emails', nav: true, title: 'Emails' },
      { route: 'notifications', name: 'notifications', moduleId: 'profile/notifications/notifications', nav: true, title: 'Notifications' }
    ]);
    this.router = router;
  }
}

## settings\settings.html
<template>
  <h2>Settings</h2>
</template>

## settings\settings.js
export class Settings {

}

## styles.css
:root {

  --accent: rgba(236,12,104,.8);
  --white: #fff;
  --light-grey: #666;
  --medium-grey: #444;
  --dark-grey: #333;

  --default-border-width: 1px;
  --default-border-color: #eee;
  --default-border: var(--default-border-width) solid var(--default-border-color);

  --page-host-border-color: var(--default-border-color);
  --page-host-border-width: var(--default-border-width);

  --navigation-bgc: var(--light-grey);
  --navigation-item-hover-bgc: var(--medium-grey);
  --navigation-item-active-bgc: var(--accent);
  --navigation-item-border-color: var(--default-border-color);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1em;
  font-family: sans-serif;
}

ul {
  overflow: hidden;
  list-style-type: none;
}

a {
  display: inline-block;
  text-decoration: none;
}

.page-host {
  margin-top: .5em;
  padding: 1em;
  border: var(--default-border);
}

.primary-navigation,
.secondary-navigation {
  display: block;
  background-color: var(--navigation-bgc);
}

.primary-navigation {
  margin: 1em 0;
}

.primary-navigation li:not(.active):hover,
.secondary-navigation li:not(.active):hover {
  background-color: var(--navigation-item-hover-bgc);
}

.primary-navigation li,
.secondary-navigation li,
.tertiary-navigation li {
  float: left;
  border-right: var(--default-border-width) solid var(--navigation-item-border-color);
}

.tertiary-navigation li {
  padding: 0 .5em;
}

.tertiary-navigation li:first-child {
  padding-left: 0;
}

.tertiary-navigation li:last-child {
  border-right: none;
}

.primary-navigation a,
.secondary-navigation a {
  color: var(--white);
}

.tertiary-navigation a {
  color: var(--dark-grey);
}

.primary-navigation a {
  padding: 1em 2em;
}

.secondary-navigation a {
  padding: .5em 1em;
}

.primary-navigation .active ,
.secondary-navigation .active {
  background-color: var(--navigation-item-active-bgc);
}

.tertiary-navigation .active {
  font-weight: bold;
}
	<template>
	<require from="components/navigation.html"></require>
	<h1>Aurelia Router Demo</h1>
	<navigation router.bind="router" class="primary-navigation"></navigation>
	<div class="page-host">
	<router-view></router-view>
	</div>
	</template>
	export class App {
	configureRouter(config, router) {
	config.title = 'Aurelia';
	config.map([
	{route: ['', 'home'], name: 'home', moduleId: 'home/home', nav: true, title: 'Home'},
	{route: 'profile', name: 'profile', moduleId: 'profile/profile', nav: true, title: 'Profile'},
	{route: 'settings', name: 'settings', moduleId: 'settings/settings', nav: true, title: 'Settings'}
	]);
	this.router = router;
	}
	}
	<template bindable="router">
	<nav>
	<ul>
	<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
	<a href.bind="row.href">${row.title}</a>
	</li>
	</ul>
	</nav>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-dialog');

	aurelia.start().then(() => aurelia.setRoot());
	}
	export class Account {
	configureRouter(config, router) {
	config.map([
	{ route: '', redirect: 'username' },
	{ route: 'username', name: 'username', moduleId: 'profile/account/username/username', nav: true, title: 'Username' },
	{ route: 'password', name: 'password', moduleId: 'profile/account/password/password', nav: true, title: 'Password' }
	]);
	this.router = router;
	}
	}
	export class Profile {
	configureRouter(config, router) {
	config.map([
	{ route: '', redirect: 'account' },
	{ route: 'account', name: 'account', moduleId: 'profile/account/account', nav: true, title: 'Account' },
	{ route: 'emails', name: 'emails', moduleId: 'profile/emails/emails', nav: true, title: 'Emails' },
	{ route: 'notifications', name: 'notifications', moduleId: 'profile/notifications/notifications', nav: true, title: 'Notifications' }
	]);
	this.router = router;
	}
	}
	:root {

	--accent: rgba(236,12,104,.8);
	--white: #fff;
	--light-grey: #666;
	--medium-grey: #444;
	--dark-grey: #333;

	--default-border-width: 1px;
	--default-border-color: #eee;
	--default-border: var(--default-border-width) solid var(--default-border-color);

	--page-host-border-color: var(--default-border-color);
	--page-host-border-width: var(--default-border-width);

	--navigation-bgc: var(--light-grey);
	--navigation-item-hover-bgc: var(--medium-grey);
	--navigation-item-active-bgc: var(--accent);
	--navigation-item-border-color: var(--default-border-color);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	padding: 1em;
	font-family: sans-serif;
	}

	ul {
	overflow: hidden;
	list-style-type: none;
	}

	a {
	display: inline-block;
	text-decoration: none;
	}

	.page-host {
	margin-top: .5em;
	padding: 1em;
	border: var(--default-border);
	}

	.primary-navigation,
	.secondary-navigation {
	display: block;
	background-color: var(--navigation-bgc);
	}

	.primary-navigation {
	margin: 1em 0;
	}

	.primary-navigation li:not(.active):hover,
	.secondary-navigation li:not(.active):hover {
	background-color: var(--navigation-item-hover-bgc);
	}

	.primary-navigation li,
	.secondary-navigation li,
	.tertiary-navigation li {
	float: left;
	border-right: var(--default-border-width) solid var(--navigation-item-border-color);
	}

	.tertiary-navigation li {
	padding: 0 .5em;
	}

	.tertiary-navigation li:first-child {
	padding-left: 0;
	}

	.tertiary-navigation li:last-child {
	border-right: none;
	}

	.primary-navigation a,
	.secondary-navigation a {
	color: var(--white);
	}

	.tertiary-navigation a {
	color: var(--dark-grey);
	}

	.primary-navigation a {
	padding: 1em 2em;
	}

	.secondary-navigation a {
	padding: .5em 1em;
	}

	.primary-navigation .active ,
	.secondary-navigation .active {
	background-color: var(--navigation-item-active-bgc);
	}

	.tertiary-navigation .active {
	font-weight: bold;
	}