Auto-Hide in SideBar Component

The IntegralUI SideBar component comes with built-in feature that can show the sidebar content as a popup or it will shift the parent container content when it opens. This feature is called auto-hide, depending on its state: true or false, it determines how the sidebar opens its content.

A sample code that shows how to auto hide sidebars is available in JavaScript, Angular, React and Vue, in following sections below.

In above demo, there is a sidebar on left side that when opens it shows a content panel with a header. The header contains a command button (represented by a pin icon) that when clicked will change the auto hide mode to true or false. This affects how the sidebar content appears: as a popup or it will shift the parent container content on opening.

In both cases, you can change the size of the sidebar content from the resize bar. Any change to the size using the resize bar is saved. Whenever the sidebar opens the next time, it will appear with the last size set.

How to Auto Hide the SideBar Content

You can set the auto-hide mode in the SideBar component using the autoHide property. There are two states:

• When auto-hide is true, the sidebar content will appear as popup panel on top of its parent container
• When auto-hide is false (default), the sidebar content will shift the parent container content

• JavaScript
• Angular
• React
• Vue

Showing the sidebar content with a header is optional. If header is hidden, you can still activate the auto hide mode from your code by simply changing this property value on demand.

Conclusion

Setting the auto hide mode to true or false allow you to fix the sidebar content to appear visible in the current layout , as long as you need it. When no longer required, activating the auto-hide mode will show the sidebar content only when it is expanded.

There are two ways to change the auto hide mode during run-time, either by clicking on the pin button in sidebar header or manually from code.

SideBar is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.