Layout

The layout structure consists of two columns. The first column is the sidebar and the second is the app content that takes the remaining width. The basic code of the layout structure can be seen below.

Source code

<div class="app">
  <div class="app-body">
    <div class="app-sidebar">
      <!-- Header -->
      <!-- Navigation -->
      <!-- Footer -->
    </div>
    <div class="app-content">
      <!-- Content -->
    </div>
  </div>
</div>

Sidebar

The sidebar is the left column of the layout structure and has a header, a navigation and a footer. The template was designed using a sidebar with a maximum of two level of navigation.

Header

The header of the sidebar comes first. It contains the user informations like photo and name.

Source code

<div class="sidebar-header">
  <img src="john-doe.png" class="user-photo">
  <p class="username">
    John Doe<br>
    <small>john.doe@email.com</small>
  </p>
</div>

Navigation

The single level of navigation is defined by class .sidebar-nav-link and takes the user to desired page. You also can add buttons to sidebar wrapped with .sidebar-nav-btn. The two level of navigation is defined by class .sidebar-nav-group and opens the corresponding group of links. The attribute data-parent configures the accordion menu (refer to bootstrap documentation for details).

Source code

<ul id="sidebar-nav" class="sidebar-nav">
  <li class="sidebar-nav-btn">
    <a href="page.html" class="btn btn-block btn-outline-light">
      Button link
    </a>
  </li>
  <li>
    <a href="page.html" class="sidebar-nav-link">
      <i class="icon-link"></i> Go to page
    </a>
  </li>
  <li class="sidebar-nav-group">
    <a href="#first-group" class="sidebar-nav-link" data-toggle="collapse">
      <i class="icon-folder"></i> Open first group
    </a>
    <ul id="first-group" class="collapse" data-parent="#sidebar-nav">
      <li>
        <a href="page.html" class="sidebar-nav-link">Fisrt group page 1</a>
      </li>
      <li>
        <a href="page.html" class="sidebar-nav-link">Fisrt group page 2</a>
      </li>
    </ul>
  </li>
  <li class="sidebar-nav-group">
    <a href="#second-group" class="sidebar-nav-link" data-toggle="collapse">
      <i class="icon-folder"></i> Open second group
    </a>
    <ul id="second-group" class="collapse" data-parent="#sidebar-nav">
      <li>
        <a href="page.html" class="sidebar-nav-link">Second group page 1</a>
      </li>
      <li>
        <a href="page.html" class="sidebar-nav-link">Second group page 2</a>
      </li>
    </ul>
  </li>
</ul>

Footer

The sidebar footer contains a set of other buttons like a small toolbar.

Source code

<div class="sidebar-footer">
  <a href="#" data-toggle="tooltip" title="GitHub">
    <i class="icon-bubbles"></i>
  </a>
  <a href="#" data-toggle="tooltip" title="Settings">
    <i class="icon-settings"></i>
  </a>
  <a href="#" data-toggle="tooltip" title="Logout">
    <i class="icon-logout"></i>
  </a>
</div>

Content

The content is the right column of the layout structure and contains the page content that the user navigated to. The content can contain the components of the bootstrap such as navbar, breadcrumb and any other components you may need.

Source code

<nav class="navbar navbar-expand navbar-light bg-white">
  <div class="navbar-brand">Admin 4B</div>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">Home</li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>
<div class="container-fluid">
  Hello World!
</div>

Responsive

The template uses the bootstrap breakpoints to define the minimum width to show the sidebar. When hidden the attributes data-toggle="sidebar" and data-dismiss="sidebar" can be used to show and close the sidebar respectively.

Source code

<!-- Open sidebar -->
<button type="button" class="btn btn-sidebar" data-toggle="sidebar">
  <i class="icon-menu"></i>
</button>

<!-- Close sidebar -->
<button type="button" class="btn btn-sidebar" data-dismiss="sidebar">
  <span class="x"></span>
</button>

Methods

A few methods are available for toggle the sidebar via JavaScript:

Method	Description
`sidebar('show')`	Shows the sidebar.
`sidebar('hide')`	Hides the sidebar.

Theming

Theming can be done overriding Sass variables and custom CSS as well as in the bootstrap. For example, the width of sidebar can be changed overriding the Sass variable but also can be changed using custom CSS:

Source code

/* The media query prevents breaking the sidebar on smaller screens */
@media (min-width: 768px)
{
  .app .app-body .app-sidebar
  {
    width: 360px; /* Your custom width */
  }
}

Example

An example code for the full setup of the sidebar can be seen below.

Source code

<div class="app">
  <div class="app-body">
    <div class="app-sidebar">
      <button type="button" class="btn btn-sidebar" data-dismiss="sidebar">
        <span class="x"></span>
      </button>
      <div class="sidebar-header">
        <img src="john-doe.png" class="user-photo">
        <p class="username">
          John Doe<br>
          <small>john.doe@email.com</small>
        </p>
      </div>
      <ul id="sidebar-nav" class="sidebar-nav" data-children=".sidebar-nav-group">
        <li class="sidebar-nav-btn">
          <a href="page.html" class="btn btn-block btn-outline-light">
            Button link
          </a>
        </li>
        <li>
          <a href="page.html" class="sidebar-nav-link">
            Go to page
          </a>
        </li>
        <li class="sidebar-nav-group">
          <a href="#first-group" class="sidebar-nav-link collapsed" data-toggle="collapse">
            Open first group
          </a>
          <ul id="first-group" class="collapse" data-parent="#sidebar-nav">
            <li>
              <a href="page.html" class="sidebar-nav-link">
                Fisrt group page 1
              </a>
            </li>
            <li>
              <a href="page.html" class="sidebar-nav-link">
                Fisrt group page 2
              </a>
            </li>
          </ul>
        </li>
        <li class="sidebar-nav-group">
          <a href="#second-group" class="sidebar-nav-link collapsed" data-toggle="collapse">
            Open second group
          </a>
          <ul id="second-group" class="collapse" data-parent="#sidebar-nav">
            <li>
              <a href="page.html" class="sidebar-nav-link">
                Second group page 1
              </a>
            </li>
            <li>
              <a href="page.html" class="sidebar-nav-link">
                Second group page 2
              </a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="sidebar-footer">
        <a href="#" data-toggle="tooltip" title="GitHub">
          <i class="icon-bubbles"></i>
        </a>
        <a href="#" data-toggle="tooltip" title="Settings">
          <i class="icon-settings"></i>
        </a>
        <a href="#" data-toggle="tooltip" title="Logout">
          <i class="icon-logout"></i>
        </a>
      </div>
    </div>
    <div class="app-content">
      <nav class="navbar navbar-expand navbar-light bg-white">
        <button type="button" class="btn btn-sidebar" data-toggle="sidebar">
          <i class="icon-menu"></i>
        </button>
        <div class="navbar-brand">Admin 4B</div>
      </nav>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">Home</li>
          <li class="breadcrumb-item active" aria-current="page">Library</li>
        </ol>
      </nav>
      <div class="container-fluid">
        Hello World!
      </div>
    </div>
  </div>
</div>

What's next?

The app structure is complete. From here you can decide what you want to see next.