Sidebar

Displayed alongside the main content and used to view different pages of the web/dashboard application

Usage

Sidebar must be wrapped by .o-page__sidebar for adjusting its layout.
Control the width of sidebar using .o-page__sidebar class.
Sidebar behaviour is controlled via javascript using .js-page-sidebar class.
Sidebar will be hidden at $breakpoint-desktop and toggled via .c-sidebar-toggle.


 <div class="o-page__sidebar js-page-sidebar">
    <div class="c-sidebar">
        <a class="c-sidebar__brand" href="#">
            <img class="c-sidebar__brand-img" src="../img/logo.svg" alt="Logo">
        </a>
        <div class="c-sidebar__body">
            <h4 class="c-sidebar__title">Dashboards</h4>
            <ul class="c-sidebar__list">
                <li class="c-sidebar__item">
                    <a class="c-sidebar__link" href="#">
                        <i class="c-sidebar__icon feather icon-home">Overview
                    </a>
                </li>
                <li class="c-sidebar__item">
                    <a class="c-sidebar__link is-active" href="#">
                        <i class="c-sidebar__icon feather icon-home"></i>Overview
                    </a>
                </li>
                <li class="c-sidebar__item">
                    <a class="c-sidebar__link" href="#">
                        <i class="c-sidebar__icon feather icon-bar-chart-2"></i>Overview
                    </a>
                </li>

                <li class="c-sidebar__item has-submenu">
                  <a class="c-sidebar__link" data-toggle="collapse" href="#sidebar-submenu" aria-expanded="false" aria-controls="sidebar-submenu">
                      <i class="c-sidebar__icon feather icon-hash"></i>Sub Menu
                  </a>
                  <ul class="c-sidebar__list collapse" id="sidebar-submenu">
                    <li><a class="c-sidebar__link" href="#">Submenu link</a></li>
                    <li><a class="c-sidebar__link" href="#">Submenu link</a></li>
                    <li><a class="c-sidebar__link" href="#">Submenu link</a></li>
                  </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

A button to show/hide sidebar on small screens.

The sidebar toggle is visble at $breakpoint-desktop and smaller breakpoints and is usually placed in the navbar.

<button class="c-sidebar-toggle js-sidebar-toggle">
  <i class="feather icon-align-left"></i>
</button>

Usage

Sidebar Toggle