Aurelia: templating. Include a template in another - layout

Question

I would like to use two layouts for my Aurelia app.
Home - FAQ - Login page don't contain a sidebar;
But everything else do contain this sidebar.
My architecture, with a sidebar is pretty complicated in HTML and is like:
div.container
div.sidebar
div.sidebar_content
div.site_content
So i can't just enable or disable the sidebar because it contains the view.
I have to make two pages like "app.html", defined in main.js, but how tell to Aurelia "Choose app.html for this page, and app2.html for this other page"?
I have found the setRoot function but i have bugs with it (the routes does not work properly when i change setroot)
Thank you for your answers

Answer 1

The router supports the concept of "layouts." This is documented here: http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/10
Basically, you specify a layout for each route (you can specify a default layout on the router-view custom element:
app.html
<router-view layout-view="./layout-with-sidebar.html"></router-view>
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
var model = {
id: 1
};
config.map([
{ route: ['home', ''], name: 'home', title: "Home", moduleId: 'home', nav: true },
{ route: 'no-sidebar', name: 'no-sidebar', title: "No Sidebar", moduleId: 'no-sidebar', nav: true, layoutView: 'layout-without-sidebar.html' }
]);
this.router = router;
}
}
layout-with-sidebar.html
<template>
<div class="container">
<div class="row">
<div class="col-sm-2">
<slot name="sidebar"></slot>
</div>
<div class="col-sm-10">
<slot name="main-content"></slot>
</div>
</div>
</div>
</template>
layout-without-sidebar.html
<template>
<div class="container">
<div class="row">
<div class="col-sm-12">
<slot name="main-content"></slot>
</div>
</div>
</div>
</template>
home.html
<template>
<div slot="sidebar">
<p>I'm content that will show up on the right.</p>
</div>
<div slot="main-content">
<p>I'm content that will show up on the left.</p>
</div>
</template>
no-sidebar.html
<template>
<div slot="main-content">
<p>Look ma! No sidebar!</p>
</div>
</template>