These are two widgets that work together to display the header menu items in a sidebar. The sidebar on this page, that displays all of the RocketFuel widgets, is an example of the Sidebar Menu and Sidebar Pane.
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:
#### Sidebar Menu
Include this widget in the portal's main menu configuration. Simply go into the main menu and add the widget in the 'widget' field. Above, in the JSON options, add the template that you wish to use. See the image below for reference.
_Dependencies are included and configured as part of the provided Update Set._
### 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-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-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. |
Enter your email address for news and updates from NewRocket.