SideBar

The SideBar is a panel used for interactions directly related to the main Content, such as filtering and sorting a list of items.

Assign data-ts="SideBar" to an aside to initialize as a SideBar. The SideBar must be created with a child Panel.

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

This sidebar should be positioned either before or after the Content element as seen in your basic layout.

<div data-ts="App">
	<div data-ts="Main">
		<!-- SideBar before Content goes here -->
		<div data-ts="Content"></div>
		<!-- SideBar after Content goes here -->
		</div>
	</div>
</div>

You can toggle this position to witness the difference.

TODO: Something special here for mobile breakpoint.

Before we dive into the SideBar features, here is the most important observation.

The SideBar will automatically become hidden in the mobile breakpoint.

The mobile phone doesn't leave much room for SideBars, so we will just hide them. There is no generalized way to restore a hidden SideBar, so if you want the SideBar to be accessible to mobile users, you'll have to present a button in your content. The SideBar can be displayed with the open method.

<button data-ts="Button" onclick="ts.ui.get('#sidebar').open()">
	<span>Open The SideBar</span>
</button>

The SideBar will open like an Aside; you can resize this page to see an example. Remember that the responsive classnames can make it easy to hide and show stuff in the various breakpoints.

The SideBar is hidden now, but you can open it if you like.

SideBar tabs

SideBar tabs can be declared in the HTML via Panels and label attributes as seen in .

<aside data-ts="SideBar" data-ts.title="SideBar With Tabs">
	<div data-ts="Panels">
		<div data-ts="Panel" data-ts.label="One">
			<p>First panel</p>
		</div>
		<div data-ts="Panel" data-ts.label="Two">
			<p>Second panel</p>
		</div>
	</div>
</aside>

— or they can injected programatically via the tabs method. Remember that programatically cretated tabs don't do anything by default, so you will have to implement your own content switching mechanism via the onselect callback.

ts.ui.get('#mysidebar', sidebar => {
	sidebar
		.tabs([
			{
				label: 'One',
				onselect() {
					console.log('Select 1');
				}
			},
			{
				label: 'Two',
				onselect() {
					console.log('Select 2');
				}
			}
		])
		.open();
});

Here"s a summary of the tabs collection and tab model.

SideBar footer

You can insert a footer in the SideBar for whatever purpose you can imagine. Note that if your SideBar features tabs, you may want to manually toggle the display of one or more footer elements, since that doesn't happen automatically. Tab change can be intercepted with the onselect callback.

<aside data-ts="SideBar" data-ts.title="My SideBar">
	<div data-ts="Panel">
		<p>SideBar content.</p>
	</div>
	<footer>
		<p>Sidebar footer.</p>
	</footer>
</aside>

Nested Aside

Asides can be nested directly inside the SideBar if they are relevant for the SideBars functionality. You can just open and close them like you would with a regular Aside.

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