Customize the sidebar

This procedure shows you how to change the colors and the width of the sidebar. It involves setting theme variables.

About this task

The application sidebar is composed of two related UI elements: the SideBarRail and the SideBarDrawer. For more information, go to Application page for GBC.

If more than one application is open, the sidebar sits along the left-hand side of the application interface and lists all open applications. It provides a means of navigation for the end-user (see Figure 1). You can use the arrow at the bottom to expand the size of the sidebar.

Figure: Application with default sidebar

The following theme variables can be used to change the appearance of the sidebar:


Theme variable	Description	Default value
`$gbc-SideBarRail-color`	The text color of the items and icons.	`rgb(255, 255, 255)`
`$gbc-SideBarRail-background-color`	The background color.	`"color.adjust($ui-background-color, $lightness: -58% );"`
`$gbc-SideBarRail-width`	The default display size in pixels.	`56px`

Before you begin

This procedure assumes you are comfortable updating theme parts and themes. For the basic principles behind themes and theme parts, see How customization works. For instructions about adding and modifying themes and theme parts, see Working with themes. For information about the underlying GBC infrastructure and its components, see Theme reference.

Steps

Identify the theme part you plan to update. If you are creating a new theme part, prepare the directory.
In the theme part, open the theme.scss.json file in a text editor.
To change the sidebar colors, set the $gbc-SideBarRail-background-color and $gbc-SideBarRail-color variables. For example:
```
// in theme.scss.json
{
  ...
 "gbc-SideBarRail-background-color" : "$mt-indigo-100",
 "gbc-SideBarRail-color" : "Black",
  ...
}
```
$mt-indigo-100 is a material color constant; see Themes and colors for more details.
To change the sidebar width, set the $gbc-SideBarRail-width, For example:
```
// in theme.scss.json
{
  ...
  "gbc-SideBarRail-width" : "100px",
  ...
}
```
Note:
You can hide the sidebar by setting gbc-SideBarRail-width to 0. However, this prevents you from easily accessing the other open applications.
If you created a new theme part, add it to one or more themes.
Save your changes and rebuild your customization using gbc build:
```
$ gbc build --customization customization-project-dir
```
Test that your changes work as expected.

Open your application and check whether the sidebar displays 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-built 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, go to Selecting customizations and themes.