Open close sidebar in Vue Sidebar component

21 Dec 202412 minutes to read

Opening and closing the Sidebar can be achieved with built-in public methods.

• show(): Method to open the Sidebar.
• hide(): Method to close the Sidebar.
• toggle(): Method to toggle between open and close states of the Sidebar.

In the following sample, the toggle() method has been used to show or hide the Sidebar on button click.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-sidebar id="default-sidebar" ref="sidebar" :open="open" :close="close" :showBackdrop="showBackdrop">
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <button ejs-button id="close" v-on:click="closeClick" class="e-btn close-btn">Close Sidebar</button>
            </div>
        </ejs-sidebar>
        <div>
            <div>
                <div class="title">Main content</div>
                <div class="sub-title"> Click the button to Open the Sidebar.
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="open" class="e-btn e-info" v-on:click="openClick">Open Sidebar</button>
                    </div>

                </div>
                <div class="sub-title"> Click the button to open/close the Sidebar.
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="toggle" class="e-btn e-info" v-on:click="toggleClick">Toggle
                            Sidebar</button>
                    </div>

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

<script setup>

    import { SidebarComponent as EjsSidebar } from '@syncfusion/ej2-vue-navigations';
    import { ref } from 'vue';

    const sidebar = ref(null);
    const showBackdrop = false;

    const openClick = () => {
        sidebar.value.show();
    };
    const toggleClick = () => {
        sidebar.value.toggle();
    };
    const closeClick = () => {
        sidebar.value.hide();
    };
    const close = () => {
        console.log("sidebar closed");
    };
    const open = () => {
        console.log("sidebar opened");
    };

</script>

<style>
    @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";

    .center-align {
        text-align: center;
        padding: 20px;
    }

    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

    #default-sidebar {
        background-color: rgb(25, 118, 210);
        color: #ffffff;
    }

    .close-btn:hover {
        color: rgba(0, 0, 0, .87);
        background-color: #fafafa;
    }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-sidebar id="default-sidebar" ref="sidebar" :open="open" :close="close" :showBackdrop="showBackdrop">
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <button ejs-button id="close" v-on:click="closeClick" class="e-btn close-btn">Close Sidebar</button>
            </div>
        </ejs-sidebar>
        <div>
            <div>
                <div class="title">Main content</div>
                <div class="sub-title"> Click the button to Open the Sidebar.
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="open" class="e-btn e-info" v-on:click="openClick">Open Sidebar</button>
                    </div>

                </div>
                <div class="sub-title"> Click the button to open/close the Sidebar.
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="toggle" class="e-btn e-info" v-on:click="toggleClick">Toggle
                            Sidebar</button>
                    </div>

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

<script>

    import { SidebarComponent } from '@syncfusion/ej2-vue-navigations';

    export default {
        name: "App",
        components: {
            "ejs-sidebar": SidebarComponent
        },
        data() {
            return {
                showBackdrop: false,
            };
        },
        methods: {
            openClick: function () {
                this.$refs.sidebar.show();
            },
            toggleClick: function () {
                this.$refs.sidebar.toggle();
            },
            closeClick: function () {
                this.$refs.sidebar.hide();
            },
            close: function () {
                console.log("sidebar closed");
            },
            open: function () {
                console.log("sidebar opened");
            }
        }
    }
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";

    .center-align {
        text-align: center;
        padding: 20px;
    }

    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

    #default-sidebar {
        background-color: rgb(25, 118, 210);
        color: #ffffff;
    }

    .close-btn:hover {
        color: rgba(0, 0, 0, .87);
        background-color: #fafafa;
    }
</style>