Multiple SideBars on Different Sides
In complex layouts where you have many panels with different content, you can create tabs that will show one content at time or to save screen space you can create multiple side bars, each with its own set of tabs showing their content only when required. The SideBar content usually hides the tab content until when a tab is selected by the user.
In most cases, only one side bar is required with multiple tabs, usually placed on left or right side of the parent container. However, if you need to add additional content and show it on demand, you can place multiple sidebars on different sides of the parent container. In this article, you will learn how to work with two sidebars, the first placed on the left side while the second side bar appears on the bottom side.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to place multiple sidebars on top, right, bottom and left side.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As above demo shows, there are two side bars, one on left and the other on bottom side. Each sidebar has its own set of tabs with different content. Selecting a tab will open its content panel in opposite direction than the side where side bar is placed. This will shift the space of the sample block panel (where you will place the main content).
You can have both sidebars expanded at the same time. Furthermore, you can change the auto-hide mode of each side bar to open as a popup or to shift the main content when expanded. Each side bar has a header with pin button in its content panel that when clicked will change the auto-hide mode during run-time.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Create Sidebars on Different Sides
When there are multiple sidebars on different sides in the parent container, the following rules apply:
- When having sidebars on horizontal and vertical side, that is top and left, top and right, left and bottom or bottom and right etc. you need to create a different container for the second sidebar
- When having sidebars either on (left and right side) or (top and bottom side), you only need one parent container
In addition, depending on how side bar opens: horizontally (left or right side) or vertically (top or bottom side). If parent container has specified width and height values either in CSS or manually from code, the inbound property of SideBar component must be set to true so that when side bar opens it will shift the content of parent container. Otherwise, this is not required.
In this example, the first side bar is placed on the left side while the second one is placed on the bottom side. Following the rules specified above, we need a second container for the bottom side bar. The HTML layout looks like this:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Based on this layout, the main content is placed as a child of the second container. This will make sure, that when sidebars expand, the main content shifts correctly in all cases when one or both sidebars expand.
Because the first sidebar is placed on the left side, you only need to specify the height of the first parent container. The page or its parent width determines the width of the parent container, so it's not required or can be set to 'auto'. The height of the second container must be set to 100%, because it appears as a child of the first parent container.
The important issue here concerning the second side bar, is that the height of its parent container is set (in CSS to 100%). Because the sidebar is placed on the bottom side, when opens will affect the overall height of its parent container. To fix this, you must have the inbound property for the second sidebar set to true (the above note mention this), this will internally change the parent container height to correct value and shift it accordingly.
In addition, because the second sidebar is set in a child container of the first sidebar, the zIndex attribute of the side bar content panel needs to be set by on level lower than the first side bar. This will make sure that when in auto-hide mode the content of second side bar doesn't overlap the content of the first side bar.
Everything else is just general settings for each sidebar: its size, the number of tabs with their content, tab placement etc. You will find more information in corresponding article governing a specific feature of the SideBar component.
Conclusion
You can have multiple sidebars placed on different sides within the same parent container. There are few rules that you need to follow, when working with multiple side bars. Overall, this allows you to create complex layouts in your applications where you can display specific content on demand, using one or more sidebars placed on different sides.
SideBar component is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.