SideBar

<aside data-ts="SideBar">
	<div data-ts="Panel">
		<p>SideBar content.</p>
	</div>
</aside>

Also note tht the SideBar must be positioned before or after the Main element:

<main data-ts="Main"> ... </main>
<aside data-ts="SideBar"> ... </aside>

Toggle the SideBar

In mobile breakpoint, the SideBar is hidden and must be toggled forth manually. If you resize to mobile view, you can try it with this button.

Toggle SideBar

You can toggle the SideBar like you would toggle an Aside.

var sidebar = gui.get('#mysidebar');
sidebar.open();
sidebar.close();
sidebar.toggle();

Bonus panels

You can put a Footer next to the Panel. The Footer will stick to the bottom of the SideBar.

<aside data-ts="SideBar" id="mysidebar" data-ts.title="My SideBar">
	<div data-ts="Panel"> ... </div>
	<div data-ts="Footer" class="ts-show-mobile-only"> ... </div>
</aside>

Nesting Asides

You can make subsidebars by nesting Aside components in the ts-sidebar. The Aside can be opened and closed like a normal Aside.

<aside data-ts="SideBar">
	<div data-ts="Panel">
		<p>SideBar content</p>
	</div>
	<aside data-ts="Aside">
		<div data-ts="Panel">
			<p>Aside content.</p>
		</div>
	</aside>
</aside>

Custom toolbar buttons

The SideBar header works like a Toolbar. You can add buttons with an API, so we'll add a button to toggle that Aside we talked about.

var sidebar = gui.get('#mysidebar');
var header = sidebar.header();
header.buttons.push({
	icon: 'ts-icon-add',
	onclick: function() {
		gui.get('#myaside').toggle();
	}
});