This procedure shows you what you can do to influence whether the sidebar displays or whether the sidebar is hidden. It involves setting theme variables.

Overview

The sidebar sits along the left-hand side of the application interface and lists all open applications and windows. It provides a means of navigation for the end-user (see Figure 1). While it can be useful, it also takes up real estate and decreases the space available for the main container. As a developer, you may prefer to hide the sidebar in order to give more space to the main container. Hiding the sidebar does not remove the sidebar; the sidebar icon (also known as the hamburger icon) provides a means to access the sidebar (see Figure 2). For more information on the sidebar and the main container, see Application page.

Figure 1: Application with sidebar visible

Figure 1: Application with sidebar hidden and sidebar icon displayed

Whether the sidebar displays depends on the setting of the theme-sidebar-always-visible-min-width theme variable. This 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.

Before you begin

This procedure assumes you are comfortable updating theme parts and themes. For the basic principles behind themes and theme parts, see Customization fundamentals. For instructions about adding and modifying themes and theme parts, see Manage themes.

Update the theme variable

1. Identify the theme part you plan to update. If you are creating a new theme part, prepare the directory.

2. In the theme part, open the theme.scss.json file in a text editor.

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

   // in theme.scss.json
   {
     ...
     "theme-sidebar-always-visible-min-width" : "1400px",
     ...
   }
   

   In this example, the minimum width is set to 1400 pixels (a low number). When the browser width is greater than 1400 pixels, the sidebar displays.

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

   // in theme.scss.json
   {
     ...
     "theme-sidebar-always-visible-min-width" : "9999px",
     ...
   }
   

   In this example, the minimum width is set to 9999 pixels (a high number). The sidebar is hidden when the browser width is less that the minimum width setting.

5. If you created a new theme part, add it to one or more themes.

Compile

After updating theme.scss.json with the theme variable and ensuring the theme part is assigned to one or more themes, you compile your customization.

$ gbc build --customization <customization_project_dir>

Test

Test that your changes work as expected. Open your application and expand or contract the browser width. Check whether the sidebar displays or hides as expected.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.

If your tests do not behave as expected, ensure you are using your newly-compiled custom GBC. Depending on your development environment, you may need to package and deploy a custom GBC client. For information on which customization and theme you are using, see Customization and Theme Selection.