ScottWhittaker · April 14, 2022 15:20
diff --git a/app.html b/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>
diff --git a/app.js b/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;
  }
 }
diff --git a/components\navigation.html b/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>
diff --git a/home\home.html b/home\home.html
 <template>
  <h2>Home</h2>
 </template>
diff --git a/home\home.js b/home\home.js
 export class Home {

 }
diff --git a/index.html b/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>
diff --git a/main.js b/main.js
 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-dialog');

  aurelia.start().then(() => aurelia.setRoot());
 }
diff --git a/profile\account\account.html b/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>
diff --git a/profile\account\account.js b/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;
  }
 }
diff --git a/profile\account\password\password.html b/profile\account\password\password.html
 <template>
  <h2>Password</h2>
 </template>
diff --git a/profile\account\password\password.js b/profile\account\password\password.js
 export class Password {
  
 }

diff --git a/profile\account\username\username.html b/profile\account\username\username.html
 <template>
  <h2>Username</h2>
 </template>
diff --git a/profile\account\username\username.js b/profile\account\username\username.js
 export class Username {

 }
diff --git a/profile\emails\emails.html b/profile\emails\emails.html
 <template>
  <h2>Emails</h2>
 </template>
diff --git a/profile\emails\emails.js b/profile\emails\emails.js
 export class Emails {
  
 }
diff --git a/profile\notifications\notifications.html b/profile\notifications\notifications.html
 <template>
  <h2>Notifications</h2>
 </template>
diff --git a/profile\notifications\notifications.js b/profile\notifications\notifications.js
 export class Notifications {
  
 }
diff --git a/profile\profile.html b/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>
diff --git a/profile\profile.js b/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;
  }
 }
diff --git a/settings\settings.html b/settings\settings.html
 <template>
  <h2>Settings</h2>
 </template>
diff --git a/settings\settings.js b/settings\settings.js
 export class Settings {
  
 }
diff --git a/styles.css b/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;
	}