Custom context in Vue Sidebar component

21 Dec 202411 minutes to read

Sidebar has a flexible option to initialize and target any HTML element alongside the main content of a web page.

By default, Sidebar initializes target to the body element. Using the target property, you can set a target element to initialize the Sidebar inside any HTML element apart from the body element.

If required , zIndex can be set when the sidebar acts as an overlay type.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-sidebar id="default-sidebar" ref="sidebar" :type="type" :target="target">
            <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 id="head">
            <ejs-button id="toggle" ref="togglebtn" cssClass="e-flat" iconCss="e-icons e-menu" isToggle="true" v-on:click="btnClick">Open</ejs-button>
        </div>
        <div>
            <div id="maincontent" class="content">
                <div>
                    <div class="title">Main content</div>
                    <div class="center-align">
                        content goes here.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end of main content declaration -->
</template>
<script setup>

import { SidebarComponent as EjsSidebar } from '@syncfusion/ej2-vue-navigations';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { ref } from 'vue';

enableRipple(true);

const sidebar = ref(null);
const togglebtn = ref(null);
const type = 'Push';
const target = '.content';

const btnClick = () => {
    if (togglebtn.value.$el.classList.contains('e-active')) {
        togglebtn.value.Content = 'Open';
        sidebar.value.hide();
    }
    else {
        togglebtn.value.Content = 'Close';
        sidebar.value.show();
    }
};
const closeClick = () => {
    sidebar.value.hide();
    togglebtn.value.$el.classList.remove('e-active');
    togglebtn.value.Content = 'Open';
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@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;
}

#head {
  border: 1px solid #424242;
  border-bottom-color: transparent;
  background: #00897b;
}

#toggle {
  /*csslintallow:adjoining-classes*/
  background: #00695c;
  box-shadow: none;
  border-radius: 0;
  height: 39px;
  width: 100px;
}

#close {
  /* csslint allow: adjoining-classes*/
  background: #fafafa;
  color: black;
}

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

#default-sidebar {
  background-color: #26a69a;
  color: #ffffff;
}

.content {
  height: 305px;
  border: 1px solid grey;
}

#toggle {
  color: white;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-sidebar id="default-sidebar" ref="sidebar" :type="type" :target="target">
            <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 id="head">
            <ejs-button id="toggle" ref="togglebtn" cssClass="e-flat" iconCss="e-icons e-menu" isToggle="true" v-on:click.native="btnClick">Open</ejs-button>
        </div>
        <div>
            <div id="maincontent" class="content">
                <div>
                    <div class="title">Main content</div>
                    <div class="center-align">
                        content goes here.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end of main content declaration -->
</template>
<script>

import { SidebarComponent } from '@syncfusion/ej2-vue-navigations';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-sidebar": SidebarComponent,
        "ejs-button": ButtonComponent
    },
    data() {
        return {
            type: 'Push',
            target: '.content'
        }
    },
    methods: {
        btnClick: function () {
            if (this.$refs.togglebtn.$el.classList.contains('e-active')) {
                this.$refs.togglebtn.Content = 'Open';
                this.$refs.sidebar.hide();
            }
            else {
                this.$refs.togglebtn.Content = 'Close';
                this.$refs.sidebar.show();
            }
        },
        closeClick: function () {
            this.$refs.sidebar.hide();
            this.$refs.togglebtn.$el.classList.remove('e-active');
            this.$refs.togglebtn.Content = 'Open';
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@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;
}

#head {
  border: 1px solid #424242;
  border-bottom-color: transparent;
  background: #00897b;
}

#toggle {
  /*csslintallow:adjoining-classes*/
  background: #00695c;
  box-shadow: none;
  border-radius: 0;
  height: 39px;
  width: 100px;
}

#close {
  /* csslint allow: adjoining-classes*/
  background: #fafafa;
  color: black;
}

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

#default-sidebar {
  background-color: #26a69a;
  color: #ffffff;
}

.content {
  height: 305px;
  border: 1px solid grey;
}

#toggle {
  color: white;
}
</style>