refactor: CoreUI components

2018-04-04 19:56:04 +02:00
parent 7dcd6bff72
commit 2313d9421e
89 changed files with 2975 additions and 4372 deletions
@@ -0,0 +1,60 @@
+<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>
+</template>
+<script>
+  import HeaderDropdown from '../Header/HeaderDropdown.vue'
+
+  export default {
+    name: 'c-header',
+    components: {
+      HeaderDropdown
+    },
+    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')
+      }
+    }
+  }
+</script>