Skip to content

Instantly share code, notes, and snippets.

@peisenmann

peisenmann/app.js

Created October 27, 2015 01:22
Show Gist options
  • Save peisenmann/494cec4c197144a1a794 to your computer and use it in GitHub Desktop.
Save peisenmann/494cec4c197144a1a794 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Grouped nav
Raw
app.js
// Settings routes
{
route: ['/settings'],
redirect: 'welcome',
title: 'Settings',
nav: true,
group: 'settings',
groupHeader: true,
settings: {glyph: 'glyphicon glyphicon-cog'}
},
{
route: ['/settings/xyz-manager'],
moduleId: './views/settings/xyz-manager',
name: 'xyz-manager',
nav: true,
group: 'settings',
title:'XYZManager'
},
{
route: ['/settings/abc-manager'],
moduleId: './views/settings/abc-manager',
name: 'abc-manager',
nav: true,
group: 'settings',
title:'ABC Manager'
}
Raw
nav-bar.html
<ul class="sidebar-menu">
<li class="header">FOCUS AREAS</li>
<li class="${row.isActive ? 'active' : ''} ${row.config.groupHeader ? 'treeview' : ''}" repeat.for="row of router.navigation | authorizedRouteFilter:auth.isAuthenticated">
<!-- Regular links-->
<template if.bind="!row.config.group">
<a href.bind="row.href">
<i class="glyphicon ${row.settings.glyph}" aria-hidden="true"></i>
<span>${row.title}</span>
</a>
</template>
<!-- Group headers -->
<template if.bind="row.config.groupHeader">
<a href="#">
<i class="${row.settings.glyph}" aria-hidden="true"></i> <span>${row.title}</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="${subrow.isActive ? 'active' : ''}" repeat.for="subrow of $parent.childrenFromGroup(row.config.group)">
<a href.bind="subrow.href"><i class="glyphicon ${subrow.settings.glyph}"></i> ${subrow.title}</a>
</li>
</ul>
</template>
</li>
</ul>
Raw
nav-bar.js
import {bindable, containerless} from 'aurelia-framework';
@containerless()
export class NavBar {
@bindable router = null;
@bindable auth = null;
childrenFromGroup(group) {
return this.router.navigation.filter(r => r.config.group == group && !r.config.groupHeader);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment