Sidebar
Sidebar can contain the entire content of the product and allows users a quick access to a specific piece of content. The left arrow allows the user to hide or to show the sidebar.
About
This component have multiple variation. Sidebar can be used as a static part of a layout without folding behavior.
Static version
<div class="nj-sidebar">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo" src="https://design.digital.engie.com/assets/brand/logo-engie-blue.svg" alt="ENGIE" width="100px">
</a>
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">home</i>Navigation item 1</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">desktop_mac</i>Navigation item 2</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i>Navigation item 3</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i>Navigation item 4</a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h3>This div has the <code>.nj-sidebar-content</code> class. Its mandatory to have the right behavior with a fixed sidebar.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Folded version
Add .nj-sidebar--folded
class on <div class="nj-sidebar">
tag to have a folded version of the sidebar.
<div class="nj-sidebar nj-sidebar--folded">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo--folded" src="https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt="ENGIE" width="auto" height="36">
</a>
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">home</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">desktop_mac</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">apps</i></a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Small list version
Add the following class to have a small sidebar :
.nj-sidebar--sm
class on<div class="nj-sidebar">
tag.nj-list-group--sm
class on<div class="nj-list-group ">
tag
<div class="nj-sidebar nj-sidebar--folded nj-sidebar--sm">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo--folded" src="https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt="ENGIE" width="auto" height="36">
</a>
<div class="nj-list-group nj-list-group--sm nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">home</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">desktop_mac</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">apps</i></a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Collapsing version
If you want to have an hovering effect (instead of pushing the content), remove .nj-sidebar-content
class on the right div. You may have to adjust the padding of this div on the left with .pl-7
for example.
<div class="nj-sidebar" id="sidebarFoldedExample">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo--folded" src="https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt="ENGIE" width="auto" height="36">
</a>
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">home</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">desktop_mac</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">apps</i></a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h4>If you want to have an hovering effect (instead of pushing the content), remove <code>.nj-sidebar-content</code> class on the parent.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Collapsing sidebar with navbar
For this example, we made a specific page to show the sidebar with a navbar for a better user experience.
<nav class="nj-navbar nj-navbar--blue nj-navbar--expand-xl fixed-top">
<a class="nj-navbar__brand" href="#">
<img src="https://design.digital.engie.com/assets/brand/logo-engie-white.svg" alt="" class="nj-navbar__logo">
</a>
<button class="nj-navbar__toggler" type="button" data-toggle="collapse" data-target="#navbarExample">
<i class="nj-navbar__toggler-icon material-icons">menu</i>
</button>
<div class="nj-navbar--collapse nj-collapse" id="navbarExample">
<ul class="nj-navbar__nav ml-auto">
<li class="nj-navbar__nav-item active"><a class="nj-navbar__nav-link" href="#">Nav item</a></li>
<li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link" href="#">Nav item</a></li>
<li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link nj-navbar__nav-link--icon" href="#"><i class="material-icons md--white">network_check</i></a></li>
</ul>
</div>
</nav>
<div class="nj-sidebar nj-sidebar--folded nj-sidebar--navbar" id="SidebarWithNavbar">
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<button class="nj-list-group__item nj-sidebar__fold-btn mt-auto" data-toggle="sidebar" data-target="#SidebarWithNavbar">
<i class="material-icons md-24 mr-3 nj-sidebar__toggler">keyboard_arrow_left</i> Close
</button>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">home</i>Navigation item 1</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">desktop_mac</i>Navigation item 2</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i>Navigation item 3</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i>Navigation item 4</a>
</div>
</div>
<div class="pl-7 pt-7">
<h3 class="mt-3">Collasping sidebar</h3>
<!-- Your content -->
</div>