extends ../_bootstrap
append styles
	// Custom styles for this template
	link(href='/css/offcanvas.css', rel='stylesheet')
block body
	nav.navbar.navbar-fixed-top.navbar-inverse
		.container
			.navbar-header
				button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
					span.sr-only Toggle navigation
					span.icon-bar
					span.icon-bar
					span.icon-bar
				a.navbar-brand(href='#') Project name
			#navbar.collapse.navbar-collapse
				ul.nav.navbar-nav
					li.active
						a(href='#') Home
					li
						a(href='#about') About
					li
						a(href='#contact') Contact
	.container
		.row.row-offcanvas.row-offcanvas-right
			.col-xs-12.col-sm-9
				p.pull-right.visible-xs
					button.btn.btn-primary.btn-xs(type='button', data-toggle='offcanvas') Toggle nav
				.jumbotron
					h1 Hello, world!
					p
						| This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.
				.row
					.col-xs-6.col-lg-4
						h2 Heading
						p
							| Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
						p
							a.btn.btn-default(href='#', role='button') View details »

					.col-xs-6.col-lg-4
						h2 Heading
						p
							| Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
						p
							a.btn.btn-default(href='#', role='button') View details »

					.col-xs-6.col-lg-4
						h2 Heading
						p
							| Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
						p
							a.btn.btn-default(href='#', role='button') View details »

					.col-xs-6.col-lg-4
						h2 Heading
						p
							| Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
						p
							a.btn.btn-default(href='#', role='button') View details »

					.col-xs-6.col-lg-4
						h2 Heading
						p
							| Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
						p
							a.btn.btn-default(href='#', role='button') View details »
					// /.col-xs-6.col-lg-4
					.col-xs-6.col-lg-4
						h2 Heading
						p
							| Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
						p
							a.btn.btn-default(href='#', role='button') View details »
				

			#sidebar.col-xs-6.col-sm-3.sidebar-offcanvas
				.list-group
					a.list-group-item.active(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
					a.list-group-item(href='#') Link
		block content
		hr
		footer
			p © Company 2014

append scripts
	script(src='/js/offcanvas.js')