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 retract or expand the sidebar.
About
This component have multiple variation. Sidebar can be used as a static part of a layout without folding behavior.
Example
The nj-sidebar component has a modular structure. It is composed of several sub-elements that you can mix and match to achieve the desired result:
.nj-sidebar
is the wrapper element:
if you want the sidebar to retract and expand, pass it an id
and use it in the .nj-sidebar__collapse
element (see below).
data-close-on-interact-out="true"
attribute allows the sidebar to retract if you click outside it
.nj-sidebar--folded
to fold the sidebar
.nj-sidebar--no-motion
to remove the fold animation
.nj-sidebar__brand
holds the brand logotype.
.nj-sidebar__navigation
is a wrapper for the navigation list elements
we provide an example of a nav with the nj-list component
we also provide a .nj-sidebar__navigation--footer
modifier that anchors it at the bottom (see full example below).
.nj-sidebar__collapse
houses the button that folds / expands the sidebar if needed
.nj-sidebar-content
is the wrapper element used for all the content outside the sidebar. It wraps your content so that it behaves correctly with the fixed sidebar.
<div class= "nj-sidebar" id= "sidebarExample" data-close-on-interact-out= "true" >
<!-- Logo-->
<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 - back to home" width= "100px" >
<img class= "nj-sidebar__logo--folded" src= "https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt= "ENGIE - back to home" width= "auto" height= "36" >
</a>
<!-- Nav -->
<nav class= "nj-sidebar__navigation" >
<ul class= "nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items" >
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border active" aria-current= "true" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > dashboard</span>
<span class= "nj-list-group__item-content" > Dashboard</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > report_problem</span>
<span class= "nj-list-group__item-content" > Alerts</span>
<p class= "nj-badge nj-badge--information nj-list-group__item-right-content" > 7</p>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > show_chart</span>
<span class= "nj-list-group__item-content" > Signals</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > online_prediction</span>
<span class= "nj-list-group__item-content" > Simulation</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > event</span>
<span class= "nj-list-group__item-content" > Events</span>
</a>
</li>
</ul>
</nav>
<!-- Footer nav -->
<nav class= "nj-sidebar__navigation nj-sidebar__navigation--footer" >
<ul class= "nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items" >
<div class= "nj-sidebar__divider" ></div>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > settings</span>
<span class= "nj-list-group__item-content" > Settings</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > account_circle</span>
<span class= "nj-list-group__item-content" > Profile</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > power_settings_new</span>
<span class= "nj-list-group__item-content" > Logout</span>
</a>
</li>
</ul>
</nav>
<ul class= "nj-sidebar__collapse nj-list-group nj-list-group--sm nj-list-group--no-border" >
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--no-border" >
<button data-toggle= "sidebar" data-target= "#sidebarExample" aria-pressed= "false" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon nj-sidebar__fold-btn" > chevron_left</span>
<span class= "nj-list-group__item-content" > Close</span>
</button>
</li>
</ul>
</div>
<div class= "nj-sidebar-content" style= "padding: var(--nj-semantic-size-spacing-16);" >
<h3> This div has the <code> .nj-sidebar-content</code> class. It's 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>
<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>
<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.
For this example, we made a specific page to show the sidebar with a navbar for a better user experience.
See the example
<nav class= "nj-navbar nj-navbar--fixed nj-navbar--shadow nj-navbar--expand-xl" >
<a class= "nj-navbar__brand" href= "#" >
<svg class= "nj-navbar__logo" >
<use href= "/assets/brand/logo-engie.svg#logo-engie" />
</svg>
</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" ><a class= "nj-navbar__nav-link active" href= "#" > Active nav item</a></li>
<li class= "nj-navbar__nav-item" ><a class= "nj-navbar__nav-link disabled" href= "#" > Disabled 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" href= "#" > Nav item</a></li>
<li class= "nj-navbar__nav-item" ><a class= "nj-navbar__nav-link nj-navbar__nav-link--icon" href= "#" ><span
aria-hidden= "true" class= "material-icons nj-icon-material nj-icon-material--brand" > network_check</span><span
class= "nj-sr-only" > Nav item</span></a></li>
</ul>
</div>
</nav>
<div class= "nj-sidebar nj-sidebar--custom-height" id= "sidebarExample" data-close-on-interact-out= "true" >
<!-- Nav -->
<nav class= "nj-sidebar__navigation" >
<ul class= "nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items" >
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border active" aria-current= "true" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > dashboard</span>
<span class= "nj-list-group__item-content" > Dashboard</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > report_problem</span>
<span class= "nj-list-group__item-content" > Alerts</span>
<p class= "nj-badge nj-badge--information nj-list-group__item-right-content" > 7</p>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > show_chart</span>
<span class= "nj-list-group__item-content" > Signals</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > online_prediction</span>
<span class= "nj-list-group__item-content" > Simulation</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > event</span>
<span class= "nj-list-group__item-content" > Events</span>
</a>
</li>
</ul>
</nav>
<!-- Footer nav -->
<nav class= "nj-sidebar__navigation nj-sidebar__navigation--footer" >
<ul class= "nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items" >
<div class= "nj-sidebar__divider" ></div>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > settings</span>
<span class= "nj-list-group__item-content" > Settings</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > account_circle</span>
<span class= "nj-list-group__item-content" > Profile</span>
</a>
</li>
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border" >
<a href= "#" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon" > power_settings_new</span>
<span class= "nj-list-group__item-content" > Logout</span>
</a>
</li>
</ul>
</nav>
<!-- Collapse button -->
<ul class= "nj-sidebar__collapse nj-list-group nj-list-group--sm nj-list-group--no-border" >
<li class= "nj-list-group__item nj-list-group__item--clickable nj-list-group__item--no-border" >
<button data-toggle= "sidebar" data-target= "#sidebarExample" aria-pressed= "false" >
<span aria-hidden= "true" class= "material-icons nj-list-group__item-icon nj-sidebar__fold-btn" > chevron_left</span>
<span class= "nj-list-group__item-content" > Close</span>
</button>
</li>
</ul>
</div>
<div class= "nj-sidebar-content" style= "padding: var(--nj-semantic-size-spacing-16); height: 2000px;" >
<!-- Your content goes here -->
</div>