Side Panel

The side panel is a position fixed region in the left or right side of the browser window. You can make every element of a website to a side panel by adding either the css class side-panel or side-panel side-panel--right. The elements are thus moved to the left or right in the invisible area of the browser.

In order to be able to display the elements, special data attributes are required. There are four different data attributes, each with a different meaning. the value of the attributes must clearly define a side panel. You can reference several side panels in this way.

  • data-sg-side-panel="SOME-UNQIE-ID" The element with the class side-panel or side-panel side-panel--right needs this attribute. The value of the attribute determines the unique identifier of the side panel.
  • data-sg-side-panel-open="SOME-UNQIE-ID" The element with this data attribute receives a click event that opens the side-panel with the unique identifier.
  • data-sg-side-panel-close="SOME-UNQIE-ID" The element with this data attribute receives a click event that close the side-panel with the unique identifier.
  • data-sg-side-panel-toggle="SOME-UNQIE-ID" The element with this data attribute receives a click event that toggles the side-panel with the unique identifier.

An element can contain both a data-side-panel-open and a data-side-panel-close attribute. This allows you to open a side panel, for example, while another closes at the same time. An element that already has a data side panel toggle cannot have any of the other attributes!

Theme basic Screen size XL
html