refactor: CoreUI components

src/components/Header/Header.vue

@@ -1,59 +1,34 @@
 <template>
-  <header class="app-header navbar">
-    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <b-link class="navbar-brand" to="#"></b-link>
-    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <b-navbar-nav class="d-md-down-none">
-      <b-nav-item class="px-3">Dashboard</b-nav-item>
-      <b-nav-item class="px-3">Users</b-nav-item>
-      <b-nav-item class="px-3">Settings</b-nav-item>
-    </b-navbar-nav>
-    <b-navbar-nav class="ml-auto">
-      <b-nav-item class="d-md-down-none">
-        <i class="icon-bell"></i>
-        <b-badge pill variant="danger">5</b-badge>
-      </b-nav-item>
-      <b-nav-item class="d-md-down-none">
-        <i class="icon-list"></i>
-      </b-nav-item>
-      <b-nav-item class="d-md-down-none">
-        <i class="icon-location-pin"></i>
-      </b-nav-item>
-      <HeaderDropdown/>
-    </b-navbar-nav>
-    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+  <header
+    :class="classList">
+    <slot>Header</slot>
   </header>
 </template>
-<script>
-  import HeaderDropdown from './HeaderDropdown.vue'
 
+<script>
   export default {
-    name: 'c-header',
-    components: {
-      HeaderDropdown
+    name: 'AppHeader',
+    props: {
+      fixed: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      classList () {
+        return [
+          'app-header',
+          'navbar'
+        ]
+      }
+    },
+    mounted: function () {
+      this.isFixed(this.fixed)
     },
     methods: {
-      sidebarToggle (e) {
-        e.preventDefault()
-        document.body.classList.toggle('sidebar-hidden')
-      },
-      sidebarMinimize (e) {
-        e.preventDefault()
-        document.body.classList.toggle('sidebar-minimized')
-      },
-      mobileSidebarToggle (e) {
-        e.preventDefault()
-        document.body.classList.toggle('sidebar-mobile-show')
-      },
-      asideToggle (e) {
-        e.preventDefault()
-        document.body.classList.toggle('aside-menu-hidden')
+      isFixed (fixed) {
+        fixed ? document.body.classList.add('header-fixed') : document.body.classList.remove('header-fixed')
+        return fixed
       }
     }
   }

src/components/Header/HeaderDropdown.vue

@@ -1,26 +1,31 @@
 <template>
-      <b-nav-item-dropdown right no-caret>
-        <template slot="button-content">
-          <img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-        </template>
-        <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
-        <b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
-        <b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
-        <b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
-        <b-dropdown-divider></b-dropdown-divider>
-        <b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
-      </b-nav-item-dropdown>
+  <b-nav-item-dropdown :right="right" :no-caret="noCaret">
+    <template slot="button-content">
+      <slot name="button-content">
+        <img
+          src="static/img/avatars/6.jpg"
+          class="img-avatar"
+          alt="admin@bootstrapmaster.com" />
+      </slot>
+    </template>
+    <slot>
+      <div :style="{ right: 'auto', height: '400px' }">dropdown</div>
+    </slot>
+  </b-nav-item-dropdown>
 </template>
 <script>
   export default {
-    name: 'header-dropdown',
+    name: 'HeaderDropdown',
+    props: {
+      right: {
+        type: Boolean,
+        default: false
+      },
+      noCaret: {
+        type: Boolean,
+        default: false
+      }
+    },
     data: () => {
       return { itemsCount: 42 }
     }

src/components/Header/index.js

@@ -0,0 +1,7 @@
+import Header from './Header'
+import HeaderDropdown from './HeaderDropdown'
+
+export {
+  Header,
+  HeaderDropdown
+}