<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<a class="navbar-brand" href="#">
Generic Brand
</a>
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
</div>
</nav>
<div class="col-md-10 offset-md-2">
<div class="container">
<div class="row">
<div id="dashboard" class="col-md-12">
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch');
body {
background: #242424;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
color: #fff;
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: 1rem;
overflow-x: hidden;
overflow-y: auto;
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.navbar-brand {
display: block;
height: 48px;
padding: 0.5rem 1rem;
margin: 0;
background: #343434;
color: #fff;
text-align: center;
transition: background 0.5s;
font-family: 'Cabin Sketch', cursive;
font-size: 1.8rem;
line-height: 2rem;
}
.navbar-brand:hover {
background: #3c3c3c;
color: #efefef;
transition: background 0.5s;
}
.sidebar .nav-link {
padding: 1rem;
font-weight: 500;
color: #ccc;
}
.sidebar .nav-item:hover {
background: #EEEEEE;
}
.sidebar .nav-link:hover {
color: #333333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #999;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar .nav-item:hover {
padding-left: 16px;
transition: padding-left 0.5s;
}
#dashboard {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
}