Sidebar is a panel component displayed as an overlay.
<div class="card">
<p:sidebar widgetVar="sidebar1">
<h3>Left Sidebar</h3>
</p:sidebar>
<p:sidebar widgetVar="sidebar2" position="right">
<h3>Right Sidebar</h3>
</p:sidebar>
<p:sidebar widgetVar="sidebar3" position="top">
<h3>Top Sidebar</h3>
</p:sidebar>
<p:sidebar widgetVar="sidebar4" position="bottom">
<h3>Bottom Sidebar</h3>
</p:sidebar>
<p:sidebar widgetVar="sidebar5" fullScreen="true">
<h3>Full Screen Sidebar</h3>
</p:sidebar>
<p:commandButton icon="pi pi-arrow-right" type="button" onclick="PF('sidebar1').show()" styleClass="mr-2" />
<p:commandButton icon="pi pi-arrow-left" type="button" onclick="PF('sidebar2').show()" styleClass="mr-2" />
<p:commandButton icon="pi pi-arrow-down" type="button" onclick="PF('sidebar3').show()" styleClass="mr-2" />
<p:commandButton icon="pi pi-arrow-up" type="button" onclick="PF('sidebar4').show()" styleClass="mr-2" />
<p:commandButton icon="pi pi-external-link" type="button" onclick="PF('sidebar5').show()"/>
</div>