primevue-mirror/src/views/sidebar/SidebarDemo.vue

<template>
    <div>
        <div class="content-section introduction">
            <div class="feature-intro">
                <h1>Sidebar</h1>
                <p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
            </div>
        </div>

        <div class="content-section implementation">
            <div class="card">
                <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
                <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
                <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
                <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  />
                <Button icon="pi pi-th-large" @click="visibleFull = true"  />

                <Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
                    <h3>Left Sidebar</h3>
                </Sidebar>

                <Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
                    <h3>Right Sidebar</h3>
                </Sidebar>

                <Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
                    <h3>Top Sidebar</h3>
                </Sidebar>

                <Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
                    <h3>Bottom Sidebar</h3>
                </Sidebar>

                <Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
                    <h3>Full Screen</h3>
                </Sidebar>
            </div>
        </div>

        <SidebarDoc/>
    </div>
</template>

<script>
import SidebarDoc from './SidebarDoc';

export default {
    data() {
        return {
            visibleLeft: false,
            visibleRight: false,
            visibleTop: false,
            visibleBottom: false,
            visibleFull: false
        }
    },
    components: {
        'SidebarDoc': SidebarDoc
    }
}
</script>