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.

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