This procedure shows you how to display or hide the sidebar.

Overview

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

Before you Begin

This procedure assumes you know how to create or locate theme parts, and how to add theme parts to a theme in your customization. To review, see the topics:

• Add a theme part
• Add a theme
• Modify a theme

Edit the value of the theme variable

Theme variables are set in the theme.scss.json file, included as part of a theme part. You can update the theme.scss.json file in an existing theme part, or you can create a new theme part.

Once you have identified the theme part you will create or modify, open the theme.scss.json file in a text editor.

To display the sidebar, set the theme-sidebar-always-visible-min-width style to a low number of pixels.

// in theme.scss.json
{
  ...
  "theme-sidebar-always-visible-min-width" : "1400px",
  "theme-sidebar-default-width"            : "350px",
  "theme-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 sidebar displays.

To hide the sidebar, set the theme-sidebar-always-visible-min-width style to a high number of pixels.

// in theme.scss.json
{
  ...
  "theme-sidebar-always-visible-min-width" : "9999px",
  "theme-sidebar-default-width"            : "350px",
  "theme-animation-duration"               : "0.200s"
}

In this example, the minimum width is 9999 pixels (a high number). The sidebar is hidden when the browser window is less than this size.

Rebuild using grunt.

$ grunt --customization=<customization_project_dir>

Test

Test the sidebar 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.