<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>-->
<div id="throbber" style="display:none; min-height:120px;"></div>
<div id="noty-holder"></div>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://cijulenlinea.ucr.ac.cr/dev-users/">
<img src="http://placehold.it/200x50&text=LOGO" alt="LOGO"">
</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li><a href="#" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Stats"><i class="fa fa-bar-chart-o"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin User <b class="fa fa-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-fw fa-user"></i> Edit Profile</a></li>
<li><a href="#"><i class="fa fa-fw fa-cog"></i> Change Password</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-power-off"></i> Logout</a></li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li><a href="#" data-toggle="collapse" data-target="#submenu-1"><i class="fa fa-fw fa-search"></i> Production<i class="fa fa-fw fa-angle-left pull-right"></i></a></li>
<li>
<a href="#" data-toggle="collapse" data-target="#submenu-2"><i class="fa fa-fw fa-star"></i> Clients <i class="fa fa-fw fa-angle-left pull-right"></i></a>
<!--<ul id="submenu-2" class="collapse">
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.1</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.2</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.3</a></li>
</ul>-->
</li>
<li><a href="#"><i class="fa fa-fw fa-user-plus"></i> Staff <i class="fa fa-fw fa-angle-left pull-right"></i></a></li>
<li><a href="#"><i class="fa fa-fw fa-paper-plane-o"></i> Pool Management</a>
</li>
<li><a href="#"><i class="fa fa-fw fa fa-question-circle"></i> Outsource</a></li>
<li><a href="#"><i class="fa fa-fw fa fa-question-circle"></i> Outsource</a></li>
<li><a href="#"><i class="fa fa-fw fa fa-question-circle"></i> Outsource</a></li>
<li><a href="#"><i class="fa fa-fw fa fa-question-circle"></i> Outsource</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<div class="col-sm-12 col-md-12 well" id="content">
<h1>Welcome Admin!</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@media(min-width:768px) {
body {
margin-top: 50px;
}
/*html, body, #wrapper, #page-wrapper {height: 100%; overflow: hidden;}*/
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
padding: 0;
background-color: #fff;
}
@media(min-width:768px) {
#wrapper {
padding-left: 225px;
}
#page-wrapper {
padding: 22px 10px;
}
}
/* Top Navigation */
.top-nav {
padding: 0 15px;
}
.top-nav>li {
display: inline-block;
float: left;
}
.top-nav>li>a {
padding-top: 20px;
padding-bottom: 20px;
line-height: 20px;
color: #fff;
}
.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
color: #fff;
background-color: #1a242f;
}
.top-nav>.open>.dropdown-menu {
float: left;
position: absolute;
margin-top: 0;
/*border: 1px solid rgba(0,0,0,.15);*/
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.top-nav>.open>.dropdown-menu>li>a {
white-space: normal;
}
/* Side Navigation */
@media(min-width:768px) {
.side-nav {
position: fixed;
top: 60px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
border-top: 1px rgba(0,0,0,.5) solid;
overflow-y: auto;
background-color: #222;
/*background-color: #5A6B7D;*/
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
.side-nav>li>a {
width: 225px;
border-bottom: 1px rgba(0,0,0,.3) solid;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #1a242f !important;
}
}
.side-nav>li>ul {
padding: 0;
border-bottom: 1px rgba(0,0,0,.3) solid;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
/*color: #999;*/
color: #fff;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.navbar .nav > li > a > .label {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 14px;
right: 6px;
font-size: 10px;
font-weight: normal;
min-width: 15px;
min-height: 15px;
line-height: 1.0em;
text-align: center;
padding: 2px;
}
.navbar .nav > li > a:hover > .label {
top: 10px;
}
.navbar-brand {
padding: 5px 15px;
}
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$(".side-nav .collapse").on("hide.bs.collapse", function() {
$(this).prev().find(".fa").eq(1).removeClass("fa-angle-right").addClass("fa-angle-down");
});
$('.side-nav .collapse').on("show.bs.collapse", function() {
$(this).prev().find(".fa").eq(1).removeClass("fa-angle-down").addClass("fa-angle-right");
});
})
