<div class="page page-full page-mail"> <div class="tbox tbox-sm"> <!-- left side --> <div class="tcol w-md bg-tr-white lt b-r"> <!-- left side header--> <div class="p-15 bg-white" style="min-height: 61px"> <button class="btn btn-sm btn-default pull-right visible-sm visible-xs" active-toggle target="#mail-nav"><i class="fa fa-bars"></i></button> <a ui-sref="app.mail.compose" class="btn btn-sm btn-lightred b-0 br-2 text-strong">Compose</a> </div> <!-- /left side header --> <!-- left side body --> <div class="p-15 hidden-sm hidden-xs" id="mail-nav"> <ul class="nav nav-pills nav-stacked nav-sm" id="mail-folders"> <li ui-sref-active="active"><a ui-sref="app.mail.inbox">Inbox <span class="pull-right badge bg-lightred">6</span></a></li> <li><a href="javascript:;">Sent</a></li> <li><a href="javascript:;">Draft</a></li> <li><a href="javascript:;">Trash</a></li> <li><a href="javascript:;">Important</a></li> <li><a href="javascript:;">Starred</a></li> </ul> <h5 class="b-b p-10 text-strong">Labels</h5> <ul class="nav nav-pills nav-stacked nav-sm" id="mail-labels"> <li><a href="javascript:;"><i class="fa fa-fw fa-circle text-primary"></i>Family</a></li> <li><a href="javascript:;"><i class="fa fa-fw fa-circle text-default"></i>Work</a></li> <li><a href="javascript:;"><i class="fa fa-fw fa-circle text-orange"></i>Shop</a></li> <li><a href="javascript:;"><i class="fa fa-fw fa-circle text-greensea"></i>Themeforest</a></li> <li><a href="javascript:;"><i class="fa fa-fw fa-circle text-lightred"></i>Google</a></li> </ul> </div> <!-- /left side body --> </div> <!-- /left side --> <!-- right side --> <div class="tcol"> <div ui-view></div> </div> <!-- /right side --> </div> </div>