Sidebar/Rail

PacemSidebarElement is a flexible webcomponent that can be easily combined with a normal PacemMenuElement and that is designed to fit into the themed layout.
As you can see in this page, an instance of sidebar has been plugged into the page, and everything flows along accordingly.

Here's an extract of the markup:

&lt!-- rootMenu is the id of the app's menu instance -->
<pacem-sidebar open="true" id="sidebar0" on-load="#rootMenu.outset = true; #rootMenu.hideHamburgerButton = true; #rootMenu.hideBackButton = true" on-unload="#rootMenu.outset = false; #rootMenu.hideHamburgerButton = false; #rootMenu.hideBackButton = false">

<!-- content -->

</pacem-sidebar>

Styling

PacemSidebarElement rail can be styled exploiting theme colors:

To ease the arrangement of the content inside the sidebar, feel free to wrap your content with properly styled HTMLNavElement and children:

<pacem-sidebar>

    <!-- content wrapper (nav.pacem-sidebar) -->
    <nav class="pacem-sidebar">
        <div class="sidebar-start">
            <!-- top-aligned content here -->
        </div>
        <div class="sidebar-end">
            <!-- bottom-aligned content here -->
        </div>
    </nav>

</pacem-sidebar>