<body class="with_aside_nav with_important_notice fixed-nav-lg">
<div class="important_notice warning">
<div class="row">
<div class="col-xs-2" style="font-size: 24px;">
<i class="magicons-info-round"></i>
</div>
<div class="col-xs-8">
Example pictures from: <a href="http://lorempixel.com/" target="_blank">lorempixel.com</a>
</div>
<div class="col-xs-2" style="font-size: 24px;">
<i class="magicons-info-round"></i>
</div>
</div>
</div>
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar" role="navigation">
<div class="corset">
<div class="navbar-header">
<button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
<ul class="nav navbar-nav navbar-left">
<li><%= link_to "Link", "#" %></li>
<li><%= link_to "Link", "#" %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
Dropdown <b class="caret"></b>
<% end %>
<ul class="dropdown-menu">
<li><%= link_to "Link 1", "#" %></li>
<li><%= link_to "Link 2", "#" %></li>
<li><%= link_to "Link 3", "#" %></li>
</ul>
</li>
<li><%= link_to "Button", "#", class: "btn btn-success" %></li>
</ul>
</div>
</div>
</div>
<div id="nav-aside" class="fixed-left">
<div class="inner-aside">
<div class="aside-btn user-pic">
<img alt="User Picture" src="http://lorempixel.com/g/50/60/people/" />
</div>
<a class="aside-btn" href="#" title="Dashboard">
<i class='glyphicon glyphicon-home'></i>
</a>
<a class="aside-btn active" href="#" title="Settings">
<i class='glyphicon glyphicon-cog'></i>
</a>
<a class="aside-btn" href="#" title="Inbox">
<i class='glyphicon glyphicon-inbox'></i>
</a>
<a class="aside-btn" href="#" title="Pictures">
<i class='glyphicon glyphicon-picture'></i>
</a>
</div>
</div>
<div class="fullpage-table" id="banner-one">
<div class="table-row">
<div class="banner-box responsive-hero with-footer with-header fill lorempixel" style="background-image: url('http://lorempixel.com/g/1200/500/nature/')">
<div class="banner-header">
<div class="corset">
<h1 class="loud">Responsive Aside-Nav</h1>
</div>
</div>
<div class="banner-content">
<div class="corset">
<br/>
<div class="box blur">
<table class="name">
<tr>
<th>body </th>
<td>with_aside_nav with_important_notice fixed-nav-lg</td>
</tr>
<tr>
<th>navbar </th>
<td>navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar</td>
</tr>
</table>
</div>
</div>
</div>
<div class="banner-footer" id="sign_up_banner">
<div class="corset">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
<button class="btn btn-success btn-block help_arrow hide_da_notice" data-text="Hide notice!">
toggle Notice
</button>
</div>
<div class="col-sm-4 col-sm-offset-2">
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
<button class="btn btn-default btn-block help_arrow get_some_borders" data-text="click!">
toggle Borders
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main_content">
<div class="section dark">
<div class="corset">
<h1>Responsive Slidebar</h1>
<br/>
<p class="loud">
Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
make your screen smaller than 768px and press the header-toggle
</p>
<br/>
<h4>dependency:</h4>
<code>@import "magic/content/aside_nav";</code>
<code>@import "magic/content/notice";</code>
</div>
</div>
<%= render "templates/lorem" %>
</div>
</body>