Page layout
The setup for the admin is the page layout, lets examine.
Layout
This is the framework for the page. It sets up the menu bar and the main content. I just added a container on the main content so it wont go wider than a bootstrap container.
<div class="page">
<div class="page-sidebar">
... sidebar
</div>
<div class="page-body">
<div class="page-main-bg container">
... content
</div>
</div>
</div>Sidebar
An example for a sidebar, it has a couple of examples, a media object i juse for my user image. A default sidebar link and an open and closed sidebar menu.
<div class="sidebar navbar navbar-expand-lg navbar-dark d-lg-block px-0">
<div class="text-lg-center py-3 px-3">
<a class="site-title" href="#">
... site title
</a>
</div>
<button class="navbar-toggler mr-3" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<div class="col-12 px-0">
<a class="sidebar-user" href="#profile">
<div class="media">
... media object
</div>
</a>
<ul id="menu" class="sidebar-menu">
<li class="active">
<a class="sidebar-link" href="#">... sidebar link</a>
</li>
<li class="sidebar-sub">
<a class="sidebar-link collapsed" href="#sub-menu-1" data-toggle="collapse">... toggable submenu</a>
<ul class="sidebar-sub collapse" id="sub-menu-1">
<li class="active">
<a class="sidebar-link" href="#">... sidebar link</a>
</li>
</ul>
</li>
<li class="sidebar-sub active">
<a class="sidebar-link" href="#sub-menu-1" data-toggle="collapse">... active toggable submenu</a>
<ul class="sidebar-sub collapse in" id="sub-menu-1">
<li class="active">
<a class="sidebar-link" href="#">... sidebar link</a>
</li>
... and so on
</ul>
</li>
</ul>
</div>
</div>
</div>