Add starter layout for easier development

src/layout/starter/Content.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="content">
+    <fade-transition :duration="100" mode="out-in">
+      <!-- your content here -->
+      <router-view></router-view>
+    </fade-transition>
+  </div>
+</template>
+<script>
+  import {FadeTransition} from 'vue2-transitions';
+  export default {
+    components: {
+      FadeTransition
+    }
+  };
+</script>

src/layout/starter/MobileMenu.vue

@@ -0,0 +1,10 @@
+<template>
+  <ul class="nav navbar-nav nav-mobile-menu">
+    <slot></slot>
+  </ul>
+</template>
+<script>
+export default {};
+</script>
+<style>
+</style>

src/layout/starter/SampleFooter.vue

@@ -0,0 +1,22 @@
+<template>
+  <footer class="footer">
+    <div class="container-fluid">
+      <div class="copyright">
+        © {{year}} made with <i class="tim-icons icon-heart-2"></i> by
+        <a href="https://www.binarcode.com" target="_blank">Binar Code</a>&nbsp;&
+        <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
+      </div>
+    </div>
+  </footer>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        year: new Date().getFullYear()
+      }
+    }
+  };
+</script>
+<style>
+</style>

src/layout/starter/SampleLayout.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="wrapper">
+    <side-bar>
+      <template slot="links">
+        <sidebar-link to="/dashboard" :name="$t('sidebar.dashboard')" icon="tim-icons icon-chart-pie-36"/>
+      </template>
+    </side-bar>
+    <div class="main-panel">
+      <top-navbar></top-navbar>
+
+      <dashboard-content @click.native="toggleSidebar">
+
+      </dashboard-content>
+
+      <content-footer></content-footer>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+</style>
+<script>
+  import TopNavbar from "./SampleNavbar.vue";
+  import ContentFooter from "./SampleFooter.vue";
+  import DashboardContent from "./Content.vue";
+  import MobileMenu from "./MobileMenu";
+  export default {
+    components: {
+      TopNavbar,
+      ContentFooter,
+      DashboardContent,
+      MobileMenu
+    },
+    methods: {
+      toggleSidebar() {
+        if (this.$sidebar.showSidebar) {
+          this.$sidebar.displaySidebar(false);
+        }
+      }
+    }
+  };
+</script>

src/layout/starter/SampleNavbar.vue

@@ -0,0 +1,125 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-absolute"
+       :class="{'bg-white': showMenu, 'navbar-transparent': !showMenu}">
+    <div class="container-fluid">
+      <div 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>
+      <button class="navbar-toggler" type="button"
+              @click="toggleMenu"
+              data-toggle="collapse"
+              data-target="#navigation"
+              aria-controls="navigation-index"
+              aria-label="Toggle navigation">
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+      </button>
+
+      <collapse-transition>
+        <div class="collapse navbar-collapse show" v-show="showMenu">
+          <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"
+                           menu-classes="dropdown-navbar">
+              <a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
+                <div class="photo">
+                  <img src="img/anime3.png">
+                </div>
+                <b class="caret d-none d-lg-block d-xl-block"></b>
+                <p class="d-lg-none">
+                  Log out
+                </p>
+              </a>
+              <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>
+        </div>
+      </collapse-transition>
+    </div>
+  </nav>
+</template>
+<script>
+  import { CollapseTransition } from 'vue2-transitions';
+  import Modal from '@/components/Modal';
+
+  export default {
+    components: {
+      CollapseTransition,
+      Modal
+    },
+    computed: {
+      routeName() {
+        const { name } = this.$route;
+        return this.capitalizeFirstLetter(name);
+      },
+      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>
+</style>

src/layout/starter/SamplePage.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="row"><h3>Starter page</h3></div>
+</template>
+<script>
+export default {
+  name: 'starter-page',
+  data() {
+    return {};
+  }
+};
+</script>
+<style></style>

src/main.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import App from "./App";
+// TIP: change to import router from "./router/starterRouter"; to start with a clean layout
 import router from "./router/index";
 
 import BlackDashboard from "./plugins/blackDashboard";

src/router/starterRouter.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import DashboardLayout from '../layout/starter/SampleLayout.vue';
+import Starter from '../layout/starter/SamplePage.vue';
+
+Vue.use(Router);
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      redirect: '/dashboard',
+      component: DashboardLayout,
+      children: [
+        {
+          path: 'dashboard',
+          name: 'dashboard',
+          components: { default: Starter }
+        }
+      ]
+    }
+  ]
+});