inicios del FrontEnd

APP/components/Layout/starter/SampleFooter.vue

@@ -0,0 +1,49 @@
+<template>
+  <footer class="footer">
+    <div class="container-fluid">
+      <ul class="nav">
+        <li class="nav-item">
+          <a
+            href="https://example.com"
+            target="_blank"
+            rel="noopener"
+            class="nav-link"
+          >
+            Link
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href="https://example.com"
+            target="_blank"
+            rel="noopener"
+            class="nav-link"
+          >
+            Another Link
+          </a>
+        </li>
+      </ul>
+      <div class="copyright">
+        &copy; {{ year }}, made with <i class="tim-icons icon-heart-2"></i> by
+        
+        <a
+          href="https://www.creative-tim.com/?ref=pdf-vuejs"
+          target="_blank"
+          rel="noopener"
+        >Creative Tim</a
+        >
+        for a better web.
+      </div>
+    </div>
+  </footer>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      year: new Date().getFullYear()
+    };
+  }
+};
+</script>
+<style></style>

APP/components/Layout/starter/SampleNavbar.vue

@@ -0,0 +1,137 @@
+<template>
+  <base-nav
+    v-model="showMenu"
+    class="navbar-absolute top-navbar"
+    type="white"
+    :transparent="true"
+  >
+    <div slot="brand" class="navbar-wrapper">
+      <div
+        class="navbar-toggle d-inline"
+        :class="{ toggled: $sidebar.showSidebar }"
+      >
+        <button type="button" class="navbar-toggler" @click="toggleSidebar">
+          <span class="navbar-toggler-bar bar1"></span>
+          <span class="navbar-toggler-bar bar2"></span>
+          <span class="navbar-toggler-bar bar3"></span>
+        </button>
+      </div>
+      <a class="navbar-brand" href="#pablo">{{ routeName }}</a>
+    </div>
+
+    <ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
+      <div class="search-bar input-group" @click="searchModalVisible = true">
+        <!--
+          <input type="text" class="form-control" placeholder="Search...">
+          <div class="input-group-addon"><i class="tim-icons icon-zoom-split"></i></div>
+        -->
+        <button
+          class="btn btn-link"
+          id="search-button"
+          data-toggle="modal"
+          data-target="#searchModal"
+        >
+          <i class="tim-icons icon-zoom-split"></i>
+        </button>
+        <!-- You can choose types of search input -->
+      </div>
+      <modal
+        :show.sync="searchModalVisible"
+        class="modal-search"
+        id="searchModal"
+        :centered="false"
+        :show-close="true"
+      >
+        <input
+          slot="header"
+          v-model="searchQuery"
+          type="text"
+          class="form-control"
+          id="inlineFormInputGroup"
+          placeholder="SEARCH"
+        />
+      </modal>
+      <base-dropdown
+        tag="li"
+        :menu-on-right="!$rtl.isRTL"
+        title-tag="a"
+        class="nav-item"
+        title-classes="nav-link"
+        menu-classes="dropdown-navbar"
+      >
+        <template
+          slot="title"
+        >
+          <div class="photo"><img src="img/mike.jpg" /></div>
+          <b class="caret d-none d-lg-block d-xl-block"></b>
+          <p class="d-lg-none">Log out</p>
+        </template>
+        <li class="nav-link">
+          <a href="#" class="nav-item dropdown-item">Profile</a>
+        </li>
+        <li class="nav-link">
+          <a href="#" class="nav-item dropdown-item">Settings</a>
+        </li>
+        <div class="dropdown-divider"></div>
+        <li class="nav-link">
+          <a href="#" class="nav-item dropdown-item">Log out</a>
+        </li>
+      </base-dropdown>
+    </ul>
+  </base-nav>
+</template>
+<script>
+import { CollapseTransition } from 'vue2-transitions';
+import { BaseNav, Modal } from '@/components';
+
+export default {
+  components: {
+    CollapseTransition,
+    BaseNav,
+    Modal
+  },
+  computed: {
+    routeName() {
+      const { path } = this.$route;
+      let parts = path.split('/')
+      return parts.map(p => this.capitalizeFirstLetter(p)).join(' ');
+    },
+    isRTL() {
+      return this.$rtl.isRTL;
+    }
+  },
+  data() {
+    return {
+      activeNotifications: false,
+      showMenu: false,
+      searchModalVisible: false,
+      searchQuery: ''
+    };
+  },
+  methods: {
+    capitalizeFirstLetter(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+    toggleNotificationDropDown() {
+      this.activeNotifications = !this.activeNotifications;
+    },
+    closeDropDown() {
+      this.activeNotifications = false;
+    },
+    toggleSidebar() {
+      this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
+    },
+    hideSidebar() {
+      this.$sidebar.displaySidebar(false);
+    },
+    toggleMenu() {
+      this.showMenu = !this.showMenu;
+    }
+  }
+};
+</script>
+<style scoped>
+.top-navbar {
+  top: 0px;
+}
+</style>