<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drawer</title>
<meta name="description" content="Hidden menu options triggered by the menu button in the header">
<link rel="stylesheet" href="../../style/headers.css">
<link rel="stylesheet" href="../drawer.css">
<!--
This <style> and <link> is only used for the example code, is no needed for the real case use
-->
<style>
html, body {
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
height: 100%;
overflow-x: hidden;
}
h2.bb-docs {
font-size: 1.8rem;
font-weight: lighter;
color: #666;
margin: -0.1rem 0 0;
background-color: #f5f5f5;
padding: 0.4rem 0.4rem 0.4rem 3rem;
border: solid 0.1rem #e8e8e8;
}
section[role="region"] {
height: 100%;
line-height: 1em;
font-size: 2.2rem;
}
div[role="main"] {
background: #fff;
height: calc(100% - 5rem);
overflow: hidden;
}
div[role="main"] p {
margin: 2rem 2.5rem;
}
/* Base icons */
section[data-type="sidebar"] > header .icon.icon-add {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4RTlFMTExOTIwMjA2ODExODIyQUJFQTc4MUU4NEEyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjM1MzgyMUJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjM1MzgyMEJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mzk0RjYxOUMzMTIwNjgxMTgyMkFBRjgxQ0IyNTAxM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEU5RTExMTkyMDIwNjgxMTgyMkFCRUE3ODFFODRBMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz45ZU6fAAAAiklEQVR42mL8//8/w0AAJoYBAqMW0w2wkKmPH4hVoOw7QPyRVAMYyUzVD4FYDsq+DMR6o3E8avGoxbiykxAQ78KjTxeI2aDs70B8DY9aZ2z5HJfFIIMvUclzGkB8c9AXmU+B+CyVgvrFaJE5avGoxQNSZBICzEBsAGVfAOK/9LJ4NI5HLSYIAAIMAKfZJ7+0GO5HAAAAAElFTkSuQmCC);
}
</style>
</head>
<body role="application">
<section data-type="sidebar">
<header>
<menu type="toolbar">
<a href="#"><span class="icon icon-add">add</span></a>
</menu>
<h1>Title <em>(9)</em></h1>
</header>
<nav>
<ul>
<li><a href="#">label</a></li>
<li><a href="#">label</a></li>
<li><a href="#">label</a></li>
<li><a href="#">label</a></li>
</ul>
<h2>Subtitle</h2>
<ul>
<li><a href="#">label</a></li>
<li><a href="#">label</a></li>
<li><a href="#">label larger label than the </a></li>
<li><a href="#">label</a></li>
</ul>
</nav>
</section>
<section id="drawer" role="region">
<header>
<a href="#"><span class="icon icon-menu">hide sidebar</span></a>
<a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
<h1>Inbox</h1>
</header>
<div role="main"></div>
</section>
</body>
</html>