Skip to content

Instantly share code, notes, and snippets.

@ScottWhittaker
Last active April 14, 2022 15:20
Show Gist options
  • Save ScottWhittaker/92825f79a9156cd55194b2ba7c8c42df to your computer and use it in GitHub Desktop.
Save ScottWhittaker/92825f79a9156cd55194b2ba7c8c42df to your computer and use it in GitHub Desktop.
Aurelia Router Demo
<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>
<template>
<h2>Home</h2>
</template>
export class Home {
}
<!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());
}
<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>
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;
}
}
<template>
<h2>Password</h2>
</template>
<template>
<h2>Username</h2>
</template>
<template>
<h2>Emails</h2>
</template>
export class Emails {
}
<template>
<h2>Notifications</h2>
</template>
export class Notifications {
}
<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>
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;
}
}
<template>
<h2>Settings</h2>
</template>
export class Settings {
}
: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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment