Implemented main stuff

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>