### Description
Present robust information across the portal. The Sidebar Pane widget acts as an alternative to the primary navigation at the top of the page and is typically used to present more detailed information when supporting multiple departments. This widget is a combination of two widgets that display the header menu items in a sidebar. Include this widget in the portal's main menu configuration by embedding it in the header widget.
#### Sidebar Menu
To configure this widget, go into the main menu and add the widget in the 'widget' field. In the JSON options add the template that you wish to use.
### Configuration
The Sidebar Pane is configured by being embedded in the header widget that the portal uses. Simply copy/paste this line at the end of the HTML template:
```json
<widget id="nr-sidebar-pane"></widget>
```
### CSS/SASS Variables
_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._
| Variable | Comments |
| -------- |:-------------:|
| `$nr-sidebar-bg` | This variable is used to set the background color of the pane. |
| `$nr-sidebar-width` | This variable is used to set the width of the pane. |
| `$nr-sidebar-offset-top` | This variable is used to set the height of the top border. |
| `$nr-sidebar-offset-top-xs` | This variable is used to set the height of the top border xs. |
| `$nr-sidebar-veil-color` | This variable is used to create a 'veil' over the content on the rest of the page when the sidebar is toggled open. |
| `$nr-sidebar-transition` | This variable is used to set the opening and closing transition time if toggling the pane is set to 'true'. |
| `$nr-sidebar-breakpoint` | This variable is used to determine at what screen size the sidebar will not appear, for smaller screens such as mobile. |
| `$nr-sidebar-breakpoint-max` | This variable is used to set max width of the mobile view at which the sidebar will render. |
| `$nr-sidebar-default-open` | This variable sets the default state of the sidebar to open. |
| `$nr-sidebar-location` | This variable sets the default state of the sidebar to left or right. |
.svg)
