UIKit 10 makes it possible to create a sidebar navigation menu that automatically expands and collapses. You might want to enable this feature to maximize the main work area of an application screen or to reduce visual overload for users.

At run time, the navigation menu is displayed as follows:

• When the device width is between 1025 pixels and 1440 pixels, the navigation menu automatically collapses to 51 pixels wide and only the icons are displayed. If you hover over an item in the navigation menu while it is collapsed, the menu automatically expands, overlaying part of the screen.
• When the screen is wider than 1440 pixels, the navigation menu is always expanded and does not overlay the main content.

Before you begin, make sure that you are not overriding the py-responsive-overrides.css file that is included with the pyEndUser skin in the UIKit rule. This file contains the breakpoint required for the automatic collapsing and expanding to function at run time.

To enable and use automatic expanding and collapsing:

1. Create a harness and add a screen layout to it.
2. On the General tab of the Screen layout properties dialog box, select a screen layout that contains a region on the left:
   • Header left
   • Header footer left
   • Left
3. On the Presentation tab, complete the following tasks:
   1. Select the Optimized code option to use a flexbox-based layout, which automatically alters the width, height, and order of its contents to best fill the available space.
   2. Select the Display advanced presentation options check box.
   3. In the Custom CSS class field, enter collapse-nav-auto.
   4. Click Submit.
4. If you are not using default navigation sections provided by the UIKit, such as pyWorkerPortalNavigation, make sure that you include the pyAutoCollapseLists section in your left panel. The pyAutoCollapseLists section embeds a script that automatically collapses any submenus in the navigation menu when the left panel shrinks.

Collapsed sidebar navigation menu

Expanded sidebar navigation menu, displayed on hover