Display or hide the side bar

Whether the side bar displays depends on the setting of the gbc-sidebar-always-visible-min-width style.

About this task

The gbc-sidebar-always-visible-min-width style specifies the width (in pixels) that the browser window must reach before the side bar is always visible. The lower the number, the more likely the side bar will be visible. When the browser width is less than the width specified by the style, the side bar is replaced by the side bar icon, which must be used to access the contents of the side bar.

The style is defined in the theme.scss.json file.

Open project_dir/customization/custom_project_dir/theme.scss.json file in a text editor.
To display the side bar, set the gbc-sidebar-always-visible-min-width style to a low number of pixels.
```
{
  ...
  "gbc-sidebar-always-visible-min-width" : "1400px",
  "gbc-sidebar-default-width"            : "350px",
  "gbc-animation-duration"               : "0.200s"
}
```
In this example, the minimal width is 1400 pixels (a low number). When the browser width is greater than 1400 pixels, the side bar displays.
To hide the side bar, set the gbc-sidebar-always-visible-min-width style to a high number of pixels
```
{
  ...
  "gbc-sidebar-always-visible-min-width" : "9999px",
  "gbc-sidebar-default-width"            : "350px",
  "gbc-animation-duration"               : "0.200s"
}
```
In this example, the minimum width is 9999 pixels (a high number). The side bar is hidden when the browser window is less than this size.
Rebuild using grunt.
Test the side bar works as expected. Open your application and expand / contract the browser width.
Tip: You may need to use CTRL + F5 to clear the browser cache before you see your changes.