inicios del FrontEnd

APP/components/SidebarPlugin/SideBar.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="sidebar" :data="backgroundColor">
+    <div class="sidebar-wrapper" ref="sidebarScrollArea">
+      <div class="logo">
+        <span class="simple-text logo-normal">
+          {{ title }}
+        </span>
+      </div>
+      <slot></slot>
+      <ul class="nav">
+        <slot name="links">
+          <sidebar-item
+            v-for="(link, index) in sidebarLinks"
+            :key="link.name + index"
+            :link="link"
+          >
+          </sidebar-item>
+        </slot>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'sidebar',
+  props: {
+    title: {
+      type: String,
+      default: 'Creative Tim',
+      description: 'Sidebar title'
+    },
+    shortTitle: {
+      type: String,
+      default: 'CT',
+      description: 'Sidebar short title'
+    },
+    logo: {
+      type: String,
+      default: 'http://demos.creative-tim.com/nuxt-black-dashboard-pro/img/icon-nuxt.svg',
+      description: 'Sidebar app logo'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'vue',
+      validator: value => {
+        let acceptedValues = [
+          '',
+          'vue',
+          'blue',
+          'green',
+          'primary'
+        ];
+        return acceptedValues.indexOf(value) !== -1;
+      },
+      description:
+        'Sidebar background color (vue|blue|green|orange|red|primary)'
+    },
+    sidebarLinks: {
+      type: Array,
+      default: () => [],
+      description:
+        "List of sidebar links as an array if you don't want to use components for these."
+    },
+    autoClose: {
+      type: Boolean,
+      default: true,
+      description:
+        'Whether sidebar should autoclose on mobile when clicking an item'
+    }
+  },
+  provide() {
+    return {
+      autoClose: this.autoClose
+    };
+  },
+  beforeDestroy() {
+    if (this.$sidebar.showSidebar) {
+      this.$sidebar.showSidebar = false;
+    }
+  }
+};
+</script>
+<style>
+@media (min-width: 992px) {
+  .navbar-search-form-mobile,
+  .nav-mobile-menu {
+    display: none;
+  }
+}
+</style>