Left and right side panels

Parent elements for each side panel are <div class="fixed-sidebar left">...</div> and <div class="fixed-sidebar right">...</div> accordingly. There are 2 inner blocks inside each of them:

<div class="fixed-sidebar left">    <div class="fixed-sidebar-left sidebar--small" id="sidebar-left">...</div>    <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1">...</div></div>

and

<div class="fixed-sidebar right">    <div class="fixed-sidebar-right sidebar--small" id="sidebar-right">...</div>    <div class="fixed-sidebar-right sidebar--large" id="sidebar-right-1">...</div></div>

They are our sliding side panels. The one with sidebar--small class is displayed on the screen by default, another one with sidebar--large class - slides out from the small side panel by clicking on the element with js-sidebar-open class.

In other words, we have 2 blocks for the left panel and 2 blocks for the right panel. One should take it into account while editing content and styles in the side panels.

In addition, it is worth noting that for the Mobile version of the panel duplicates, respectively:

the left panel:

<div class="fixed-sidebar left fixed-sidebar-responsive"><div class="fixed-sidebar-left sidebar--small" id="sidebar-left- responsive">...</div>div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1- responsive">...</div></div>

the right panel:

<div class="fixed-sidebar right fixed-sidebar-responsive" id="sidebar-right-responsive"><div class="fixed-sidebar-right sidebar—small">...</div><div class="fixed-sidebar-right sidebar--large">...</div></div>