Implemented main stuff

src/App.vue

@@ -9,11 +9,15 @@
 </style>
 
 <style>
+@import "../node_modules/@syncfusion/ej2/material.css";
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
+
+
+#app {
+  height: 100vh;
+}
 </style>

src/main.js

@@ -6,8 +6,9 @@ import store from './store'
 import { BootstrapVue } from 'bootstrap-vue'
 
 import { TabPlugin } from '@syncfusion/ej2-vue-navigations';
-import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
+import { ButtonPlugin, RadioButtonPlugin } from '@syncfusion/ej2-vue-buttons';
 import { TextBoxPlugin } from '@syncfusion/ej2-vue-inputs';
+import { SidebarPlugin } from '@syncfusion/ej2-vue-navigations';
 
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
@@ -16,8 +17,12 @@ Vue.config.productionTip = false
 
 Vue.use(TabPlugin);
 Vue.use(ButtonPlugin);
+Vue.use(RadioButtonPlugin);
 Vue.use(BootstrapVue);
 Vue.use(TextBoxPlugin);
+Vue.use(SidebarPlugin);
+
+
 
 new Vue({
   router,

src/views/Dashboard.vue

@@ -1,12 +1,106 @@
 <template>
-  <div>
-      Dashboard
+  <div id="dashboard-container">
+
+    <div id="head" class="text-right">
+      <ejs-button id="toggle" ref="togglebtn" class="e-btn e-info text-white" cssClass="e-flat"
+                  isToggle="true" v-on:click.native="openSidebar"><i class="e-icons e-menu"></i> Menu
+      </ejs-button>
+
+    </div>
+
+
+    <ejs-sidebar id="sidebar" ref="sidebar" type="Push" target="#maincontent" position="Right"
+                 enablePersistence="true">
+      <div id="close-holder" class="text-right m-2"><a @click.prevent="closeClick" class="text-white"><i class="e-icons e-close"></i></a></div>
+      <div id="sidebar-content" class="m-3 text-white">
+        Welcome {{ username }}!
+        <ejs-button cssClass='e-block e-danger my-2'>Logout</ejs-button>
+      </div>
+    </ejs-sidebar>
+
+
+    <div id="maincontent" class="content">
+      <div>
+
+        <div>Main content</div>
+
+      </div>
+    </div>
   </div>
+
 </template>
 
 <script>
 export default {
   name: 'Dashboard',
-  components: {}
+  components: {},
+  data() {
+    return {
+      username: "Test"
+    }
+  },
+  methods: {
+    openSidebar: 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 scoped>
+#head {
+  background: #00897B;
+  width: 100%;
+}
+
+#toggle, #container .e-btn.e-info:hover, #toggle:focus { /* csslint allow: adjoining-classes*/
+  background: #00695C;
+  box-shadow: none;
+  border-radius: 0;
+  height: 39px;
+  width: 100px;
+}
+
+#sidebar {
+  background-color: #26A69A;
+}
+
+#toggle {
+  color: white;
+}
+
+.content {
+  height: calc(100% - 39px);
+}
+
+#dashboard-container {
+  height: 100%;
+}
+
+.e-menu:before{
+  content:'\e99a';
+  font-size: 1.2em;
+}
+
+.e-close:before{
+  content:'\eb36';
+  font-size: 1.2em;
+}
+
+#sidebar-content {
+  font-size: 1rem;
+}
+
+
+</style>