despriegue

APP/layouts/default.vue

@@ -1,59 +1,62 @@
 <template>
   <div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
-     
-
     <side-bar
       :background-color="sidebarBackground"
       short-title="MD"
       title="Finanzas"
     >
-    <notifications></notifications> 
+      <notifications></notifications>
       <template slot-scope="props" slot="links">
-
         <sidebar-item
           :link="{
             name: 'Compras',
-            icon: 'tim-icons icon-chart-pie-36',
-            path: '/compras'
+            icon: 'tim-icons icon-cart',
+            path: '/compras',
           }"
         >
         </sidebar-item>
         <sidebar-item
           :link="{
             name: 'Ingresos',
-            icon: 'tim-icons icon-chart-pie-36',
-            path: '/ingresos'
+            icon: 'tim-icons icon-money-coins',
+            path: '/ingresos',
           }"
         >
         </sidebar-item>
         <sidebar-item
           :link="{
             name: 'Presupuesto',
-            icon: 'tim-icons icon-chart-pie-36',
-            path: '/presupuesto'
+            icon: 'tim-icons icon-puzzle-10',
+            path: '/presupuesto',
+          }"
+        >
+        </sidebar-item>
+
+        <sidebar-item
+          :link="{
+            name: 'Créditos',
+            icon: 'tim-icons icon-bank',
+            path: '/creditos',
           }"
         >
         </sidebar-item>
         <sidebar-item
           :link="{
             name: 'Resumen',
-            icon: 'tim-icons icon-chart-pie-36',
-            path: '/resumen'
+            icon: 'tim-icons icon-chart-bar-32',
+            path: '/resumen',
           }"
         >
         </sidebar-item>
 
-              <sidebar-item
+        <sidebar-item
           :link="{
             name: 'Configuración',
-            icon: 'tim-icons icon-chart-pie-36',
-            path: '/configuracion'
+            icon: 'tim-icons icon-settings',
+            path: '/configuracion',
           }"
         >
         </sidebar-item>
-
-
-
       </template>
     </side-bar>
     <!--Share plugin (for demo purposes). You can remove it if don't plan on using it-->
@@ -62,10 +65,7 @@
       <dashboard-navbar></dashboard-navbar>
       <!-- <router-view name="header"></router-view> -->
 
-      <div
-        :class="{ content: !isFullScreenRoute }"
-        @click="toggleSidebar"
-      >
+      <div :class="{ content: !isFullScreenRoute }" @click="toggleSidebar">
         <zoom-center-transition :duration="200" mode="out-in">
           <!-- your content here -->
           <nuxt></nuxt>
@@ -76,105 +76,102 @@
   </div>
 </template>
 <script>
-  /* eslint-disable no-new */
-  import PerfectScrollbar from 'perfect-scrollbar';
-  import 'perfect-scrollbar/css/perfect-scrollbar.css';
-  import SidebarShare from '@/components/Layout/SidebarSharePlugin';
-  function hasElement(className) {
-    return document.getElementsByClassName(className).length > 0;
+/* eslint-disable no-new */
+import PerfectScrollbar from "perfect-scrollbar";
+import "perfect-scrollbar/css/perfect-scrollbar.css";
+import SidebarShare from "@/components/Layout/SidebarSharePlugin";
+function hasElement(className) {
+  return document.getElementsByClassName(className).length > 0;
+}
+
+function initScrollbar(className) {
+  if (hasElement(className)) {
+    new PerfectScrollbar(`.${className}`);
+  } else {
+    // try to init it later in case this component is loaded async
+    setTimeout(() => {
+      initScrollbar(className);
+    }, 100);
   }
+}
 
-  function initScrollbar(className) {
-    if (hasElement(className)) {
-      new PerfectScrollbar(`.${className}`);
-    } else {
-      // try to init it later in case this component is loaded async
-      setTimeout(() => {
-        initScrollbar(className);
-      }, 100);
-    }
-  }
+import DashboardNavbar from "@/components/Layout/DashboardNavbar.vue";
+import ContentFooter from "@/components/Layout/ContentFooter.vue";
+import DashboardContent from "@/components/Layout/Content.vue";
+import { SlideYDownTransition, ZoomCenterTransition } from "vue2-transitions";
 
-  import DashboardNavbar from '@/components/Layout/DashboardNavbar.vue';
-  import ContentFooter from '@/components/Layout/ContentFooter.vue';
-  import DashboardContent from '@/components/Layout/Content.vue';
-  import { SlideYDownTransition, ZoomCenterTransition } from 'vue2-transitions';
-
-  export default {
-  
-    components: {
-      DashboardNavbar,
-      ContentFooter,
-      DashboardContent,
-      SlideYDownTransition,
-      ZoomCenterTransition,
-      SidebarShare
+export default {
+  components: {
+    DashboardNavbar,
+    ContentFooter,
+    DashboardContent,
+    SlideYDownTransition,
+    ZoomCenterTransition,
+    SidebarShare,
+  },
+  data() {
+    return {
+      sidebarBackground: "blue", //vue|blue|orange|green|red|primary
+    };
+  },
+  computed: {
+    isFullScreenRoute() {
+      return this.$route.path === "/maps/full-screen";
     },
-    data() {
-      return {
-        sidebarBackground: 'blue' //vue|blue|orange|green|red|primary
-      };
-    },
-    computed: {
-      isFullScreenRoute() {
-        return this.$route.path === '/maps/full-screen'
+  },
+  methods: {
+    toggleSidebar() {
+      if (this.$sidebar.showSidebar) {
+        this.$sidebar.displaySidebar(false);
       }
     },
-    methods: {
-      toggleSidebar() {
-        if (this.$sidebar.showSidebar) {
-          this.$sidebar.displaySidebar(false);
-        }
-      },
-      initScrollbar() {
-        let docClasses = document.body.classList;
-        let isWindows = navigator.platform.startsWith('Win');
-        if (isWindows) {
-          // if we are on windows OS we activate the perfectScrollbar function
-          initScrollbar('sidebar');
-          initScrollbar('main-panel');
-          initScrollbar('sidebar-wrapper');
+    initScrollbar() {
+      let docClasses = document.body.classList;
+      let isWindows = navigator.platform.startsWith("Win");
+      if (isWindows) {
+        // if we are on windows OS we activate the perfectScrollbar function
+        initScrollbar("sidebar");
+        initScrollbar("main-panel");
+        initScrollbar("sidebar-wrapper");
 
-          docClasses.add('perfect-scrollbar-on');
-        } else {
-          docClasses.add('perfect-scrollbar-off');
-        }
+        docClasses.add("perfect-scrollbar-on");
+      } else {
+        docClasses.add("perfect-scrollbar-off");
       }
     },
-    mounted() {
-
-      this.initScrollbar();
-      
-    }
-  };
+  },
+  mounted() {
+    this.initScrollbar();
+  },
+};
 </script>
 <style lang="scss">
-  $scaleSize: 0.95;
-  @keyframes zoomIn95 {
-    from {
-      opacity: 0;
-      transform: scale3d($scaleSize, $scaleSize, $scaleSize);
-    }
-    to {
-      opacity: 1;
-    }
+$scaleSize: 0.95;
+@keyframes zoomIn95 {
+  from {
+    opacity: 0;
+    transform: scale3d($scaleSize, $scaleSize, $scaleSize);
   }
+  to {
+    opacity: 1;
+  }
+}
 
-  .main-panel .zoomIn {
-    animation-name: zoomIn95;
-  }
+.main-panel .zoomIn {
+  animation-name: zoomIn95;
+}
 
-  @keyframes zoomOut95 {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-      transform: scale3d($scaleSize, $scaleSize, $scaleSize);
-    }
+@keyframes zoomOut95 {
+  from {
+    opacity: 1;
   }
+  to {
+    opacity: 0;
+    transform: scale3d($scaleSize, $scaleSize, $scaleSize);
+  }
+}
 
-  .main-panel .zoomOut {
-    animation-name: zoomOut95;
-  }
+.main-panel .zoomOut {
+  animation-name: zoomOut95;
+}
 </style>