Sidebar

<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>