From f244f0258577eba9d509ec7e23186a9927ee264f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Mon, 16 Oct 2017 16:08:00 +0200
Subject: [PATCH] - Update Vue to 2.5.2 - Update Vue Router to 3.0.0 - Fix
 height and position problems with .fixed-footer - Fix mobile sidebar height -
 Fix mobile breadcrumb position with .fixed-breadcrumb - Add new navbar
 toggler icon - Update old bootstrap classes ex. `hidden-sm-down`

---
 Vue_Full_Project/CHANGELOG.md                 |  8 ++
 Vue_Full_Project/package.json                 | 52 ++++++-------
 .../scss/core/_dropdown-menu-right.scss       |  2 +-
 Vue_Full_Project/scss/core/_footer.scss       |  4 +-
 Vue_Full_Project/scss/core/_layout.scss       | 32 ++++----
 Vue_Full_Project/scss/core/_navbar.scss       | 14 +++-
 Vue_Full_Project/scss/core/_sidebar.scss      |  2 +-
 Vue_Full_Project/scss/core/_variables.scss    |  3 +
 Vue_Full_Project/scss/style.scss              |  3 +-
 Vue_Full_Project/src/components/Aside.vue     | 10 +--
 .../src/components/Breadcrumb.vue             |  5 +-
 Vue_Full_Project/src/components/Header.vue    | 76 +++++++++----------
 .../src/components/HeaderDropdown.vue         | 26 +++++++
 Vue_Full_Project/src/router/index.js          |  2 +-
 Vue_Full_Project/src/views/Dashboard.vue      | 36 ++++-----
 .../src/views/components/Buttons.vue          | 30 ++++----
 .../src/views/components/Cards.vue            |  4 +-
 .../src/views/components/Tables.vue           | 50 ++++++------
 Vue_Starter/package.json                      |  2 +-
 .../scss/core/_dropdown-menu-right.scss       |  2 +-
 Vue_Starter/scss/core/_footer.scss            |  4 +-
 Vue_Starter/scss/core/_layout.scss            | 32 ++++----
 Vue_Starter/scss/core/_navbar.scss            | 14 +++-
 Vue_Starter/scss/core/_sidebar.scss           |  2 +-
 Vue_Starter/scss/core/_variables.scss         |  3 +
 Vue_Starter/scss/style.scss                   |  3 +-
 Vue_Starter/src/components/Breadcrumb.vue     |  5 +-
 Vue_Starter/src/components/Header.vue         | 12 ++-
 package.json                                  |  2 +-
 29 files changed, 249 insertions(+), 191 deletions(-)
 create mode 100644 Vue_Full_Project/CHANGELOG.md
 create mode 100644 Vue_Full_Project/src/components/HeaderDropdown.vue

diff --git a/Vue_Full_Project/CHANGELOG.md b/Vue_Full_Project/CHANGELOG.md
new file mode 100644
index 00000000..90556bdb
--- /dev/null
+++ b/Vue_Full_Project/CHANGELOG.md
@@ -0,0 +1,8 @@
+## [vue](./README.md) version `changelog`
+
+###### `v1.0.2`
+- moved to vue: `^2.5.x`
+- (vue `v2.5.x`) deprecated `<template scope="props">` replaced with `<div slot-scope="props">`
+- `HeaderDropdown` component added to `Header`
+- moved to component `b-badge` (bootstrap-vue)
+
diff --git a/Vue_Full_Project/package.json b/Vue_Full_Project/package.json
index 3efd4b46..df0945ae 100644
--- a/Vue_Full_Project/package.json
+++ b/Vue_Full_Project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
   "private": true,
@@ -19,36 +19,36 @@
     "font-awesome": "^4.7.0",
     "is-url-external": "^1.0.3",
     "simple-line-icons": "^2.4.1",
-    "vue": "2.4.4",
+    "vue": "^2.5.2",
     "vue-chartjs": "2.8.7",
-    "vue-router": "2.7.0"
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.4",
+    "autoprefixer": "7.1.5",
     "babel-core": "6.26.0",
-    "babel-eslint": "8.0.0",
+    "babel-eslint": "8.0.1",
     "babel-loader": "7.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "1.6.0",
     "babel-preset-stage-2": "6.24.1",
     "babel-register": "6.26.0",
     "chalk": "2.1.0",
-    "connect-history-api-fallback": "^1.3.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "connect-history-api-fallback": "^1.4.0",
+    "copy-webpack-plugin": "^4.1.1",
     "css-loader": "0.28.7",
-    "eslint": "4.7.2",
+    "eslint": "^4.9.0",
     "eslint-friendly-formatter": "3.0.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-html": "3.2.2",
     "eslint-plugin-import": "2.7.0",
-    "eslint-plugin-node": "5.1.1",
+    "eslint-plugin-node": "5.2.0",
     "eslint-config-standard": "10.2.1",
-    "eslint-plugin-promise": "3.5.0",
+    "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "3.0.1",
     "eventsource-polyfill": "^0.9.6",
-    "express": "4.15.5",
-    "extract-text-webpack-plugin": "3.0.0",
-    "file-loader": "0.11.2",
+    "express": "4.16.2",
+    "extract-text-webpack-plugin": "3.0.1",
+    "file-loader": "1.1.5",
     "friendly-errors-webpack-plugin": "1.6.1",
     "html-webpack-plugin": "2.30.1",
     "http-proxy-middleware": "0.17.4",
@@ -62,32 +62,32 @@
     "karma-sinon-chai": "1.3.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "2.0.4",
-    "lolex": "2.1.2",
-    "mocha": "3.5.3",
+    "karma-webpack": "^2.0.5",
+    "lolex": "2.1.3",
+    "mocha": "4.0.1",
     "chai": "4.1.2",
-    "sinon": "3.3.0",
-    "sinon-chai": "2.13.0",
+    "sinon": "4.0.1",
+    "sinon-chai": "2.14.0",
     "inject-loader": "3.0.1",
     "babel-plugin-istanbul": "4.1.5",
     "phantomjs-prebuilt": "^2.1.15",
-    "chromedriver": "2.32.3",
+    "chromedriver": "2.33.1",
     "cross-spawn": "^5.0.1",
     "nightwatch": "0.9.16",
-    "selenium-server": "3.5.3",
+    "selenium-server": "3.6.0",
     "semver": "5.4.1",
     "shelljs": "0.7.8",
     "opn": "5.1.0",
     "optimize-css-assets-webpack-plugin": "3.2.0",
     "ora": "1.3.0",
     "rimraf": "2.6.2",
-    "url-loader": "0.5.9",
-    "vue-loader": "13.0.5",
+    "url-loader": "0.6.2",
+    "vue-loader": "13.3.0",
     "vue-style-loader": "3.0.3",
-    "vue-template-compiler": "2.4.4",
-    "webpack": "3.6.0",
-    "webpack-dev-middleware": "1.12.0",
-    "webpack-hot-middleware": "2.19.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.7.1",
+    "webpack-dev-middleware": "^1.12.0",
+    "webpack-hot-middleware": "^2.20.0",
     "webpack-merge": "4.1.0",
     "node-sass": "4.5.3",
     "sass-loader": "6.0.6"
diff --git a/Vue_Full_Project/scss/core/_dropdown-menu-right.scss b/Vue_Full_Project/scss/core/_dropdown-menu-right.scss
index 427ab598..4f195468 100644
--- a/Vue_Full_Project/scss/core/_dropdown-menu-right.scss
+++ b/Vue_Full_Project/scss/core/_dropdown-menu-right.scss
@@ -5,4 +5,4 @@
       right: auto;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/Vue_Full_Project/scss/core/_footer.scss b/Vue_Full_Project/scss/core/_footer.scss
index 1c1748b4..e01595a1 100644
--- a/Vue_Full_Project/scss/core/_footer.scss
+++ b/Vue_Full_Project/scss/core/_footer.scss
@@ -1,9 +1,9 @@
 .app-footer {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding: 0 $spacer;
   color: $footer-color;
   background: $footer-bg;
-  flex-wrap: wrap;
-  align-items: center;
   @include borders($footer-borders);
 }
diff --git a/Vue_Full_Project/scss/core/_layout.scss b/Vue_Full_Project/scss/core/_layout.scss
index 6e4034db..8cc54dd7 100644
--- a/Vue_Full_Project/scss/core/_layout.scss
+++ b/Vue_Full_Project/scss/core/_layout.scss
@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
+  min-height: 100vh;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  overflow-x: hidden;
   flex-grow: 1;
+  overflow-x: hidden;
 
   .main {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 
   .sidebar {
@@ -269,9 +269,11 @@ app-root {
 .footer-fixed {
   .app-footer {
     position: fixed;
+    right: 0;
     bottom: 0;
+    left: 0;
     z-index: $zindex-sticky;
-    width: 100%;
+    height: $footer-height;
   }
 
   .app-body {
@@ -328,17 +330,26 @@ app-root {
     margin-top: $navbar-height;
   }
 
+  .breadcrumb-fixed {
+    .main:nth-child(2) .breadcrumb {
+      right: auto;
+      left: auto;
+      width: 100%;
+    }
+  }
+
   .sidebar,
   .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
-    height: 100%;
+    // height: 100%;
     margin-left: - $mobile-sidebar-width;
 
     .sidebar-nav,
     .nav {
       width: $mobile-sidebar-width !important;
+      height: calc(100vh - #{$navbar-height});
     }
 
     .sidebar-minimizer {
@@ -364,10 +375,6 @@ app-root {
     .sidebar {
       width: $mobile-sidebar-width;
       margin-left: 0;
-
-      .sidebar-nav {
-        height: calc(100vh - #{$navbar-height});
-      }
     }
 
     .main {
@@ -375,11 +382,4 @@ app-root {
       margin-left: $mobile-sidebar-width !important;
     }
   }
-
-  .breadcrumb-fixed {
-    .main .breadcrumb {
-      right: 0 !important;
-      left: 0 !important;
-    }
-  }
 }
diff --git a/Vue_Full_Project/scss/core/_navbar.scss b/Vue_Full_Project/scss/core/_navbar.scss
index 780d66ab..221ab126 100644
--- a/Vue_Full_Project/scss/core/_navbar.scss
+++ b/Vue_Full_Project/scss/core/_navbar.scss
@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  height: $navbar-height;
   flex-direction: row;
+  height: $navbar-height;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -22,7 +22,17 @@
   }
 
   .navbar-toggler {
-    color: $navbar-color;
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
   }
 
   .navbar-nav {
diff --git a/Vue_Full_Project/scss/core/_sidebar.scss b/Vue_Full_Project/scss/core/_sidebar.scss
index 3f83a0dc..b77cd5f8 100644
--- a/Vue_Full_Project/scss/core/_sidebar.scss
+++ b/Vue_Full_Project/scss/core/_sidebar.scss
@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    min-height: 100%;
     flex-direction: column;
+    min-height: 100%;
   }
 
   .nav-title {
diff --git a/Vue_Full_Project/scss/core/_variables.scss b/Vue_Full_Project/scss/core/_variables.scss
index a2bebe86..ea491eb5 100644
--- a/Vue_Full_Project/scss/core/_variables.scss
+++ b/Vue_Full_Project/scss/core/_variables.scss
@@ -69,6 +69,9 @@ $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
 $navbar-disabled-color:               $gray-300 !default;
 
+$navbar-toggler-icon:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-toggler-icon-hover:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+
 // Sidebar
 
 $sidebar-width:                       200px !default;
diff --git a/Vue_Full_Project/scss/style.scss b/Vue_Full_Project/scss/style.scss
index 151efffb..ebd2d6a2 100644
--- a/Vue_Full_Project/scss/style.scss
+++ b/Vue_Full_Project/scss/style.scss
@@ -1,10 +1,11 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.1
+ * @version v1.0.2
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
  */
+
 // Override Boostrap variables
 @import "bootstrap-variables";
 
diff --git a/Vue_Full_Project/src/components/Aside.vue b/Vue_Full_Project/src/components/Aside.vue
index 0b95f165..9fd72f68 100644
--- a/Vue_Full_Project/src/components/Aside.vue
+++ b/Vue_Full_Project/src/components/Aside.vue
@@ -93,7 +93,7 @@
             <div class="py-3 pb-5 mr-3 float-left">
               <div class="avatar">
                 <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -108,7 +108,7 @@
             <div class="py-3 pb-5 mr-3 float-left">
               <div class="avatar">
                 <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -123,7 +123,7 @@
             <div class="py-3 pb-5 mr-3 float-left">
               <div class="avatar">
                 <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -138,7 +138,7 @@
             <div class="py-3 pb-5 mr-3 float-left">
               <div class="avatar">
                 <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -153,7 +153,7 @@
             <div class="py-3 pb-5 mr-3 float-left">
               <div class="avatar">
                 <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
diff --git a/Vue_Full_Project/src/components/Breadcrumb.vue b/Vue_Full_Project/src/components/Breadcrumb.vue
index a87bfbfc..87fde93b 100644
--- a/Vue_Full_Project/src/components/Breadcrumb.vue
+++ b/Vue_Full_Project/src/components/Breadcrumb.vue
@@ -1,7 +1,8 @@
 <template>
   <ol class="breadcrumb">
-    <li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
-      <router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
+    <li class="breadcrumb-item" v-for="(item, index) in list">
+      <span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
+      <router-link :to="item" v-else>{{ showName(item) }}</router-link>
     </li>
   </ol>
 </template>
diff --git a/Vue_Full_Project/src/components/Header.vue b/Vue_Full_Project/src/components/Header.vue
index 3788b373..edd171cc 100644
--- a/Vue_Full_Project/src/components/Header.vue
+++ b/Vue_Full_Project/src/components/Header.vue
@@ -1,8 +1,12 @@
 <template>
   <header class="app-header navbar">
-    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
+    <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">&#9776;</button>
+    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
+      <span class="navbar-toggler-icon"></span>
+    </button>
     <b-nav is-nav-bar 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>
@@ -10,7 +14,8 @@
     </b-nav>
     <b-nav is-nav-bar class="ml-auto">
       <b-nav-item class="d-md-down-none">
-        <i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span>
+        <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>
@@ -18,49 +23,38 @@
       <b-nav-item class="d-md-down-none">
         <i class="icon-location-pin"></i>
       </b-nav-item>
-      <b-nav-item-dropdown right>
-        <template slot="button-content">
-          <img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-          <span class="d-md-down-none">admin</span>
-        </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<span class="badge badge-info">42</span></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></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<span class="badge badge-default">42</span></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></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>
+      <HeaderDropdown/>
     </b-nav>
-    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
+    <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>
-export default {
-  name: 'header',
-  methods: {
-    sidebarToggle (e) {
-      e.preventDefault()
-      document.body.classList.toggle('sidebar-hidden')
+  import HeaderDropdown from './HeaderDropdown.vue'
+
+  export default {
+    name: 'header',
+    components: {
+      HeaderDropdown
     },
-    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')
+    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>
diff --git a/Vue_Full_Project/src/components/HeaderDropdown.vue b/Vue_Full_Project/src/components/HeaderDropdown.vue
new file mode 100644
index 00000000..bc962db7
--- /dev/null
+++ b/Vue_Full_Project/src/components/HeaderDropdown.vue
@@ -0,0 +1,26 @@
+<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">
+          <span class="d-md-down-none">admin</span>
+        </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">42</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">42</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">42</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">42</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="default">42</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">42</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>
+</template>
+<script>
+  export default {
+    name: 'header-dropdown'
+  }
+</script>
diff --git a/Vue_Full_Project/src/router/index.js b/Vue_Full_Project/src/router/index.js
index 24dbc93a..7d862fde 100644
--- a/Vue_Full_Project/src/router/index.js
+++ b/Vue_Full_Project/src/router/index.js
@@ -125,7 +125,7 @@ export default new Router({
     },
     {
       path: '/pages',
-      redirect: '/pages/p404',
+      redirect: '/pages/404',
       name: 'Pages',
       component: {
         render (c) { return c('router-view') }
diff --git a/Vue_Full_Project/src/views/Dashboard.vue b/Vue_Full_Project/src/views/Dashboard.vue
index adc0e73b..fe2f53b7 100644
--- a/Vue_Full_Project/src/views/Dashboard.vue
+++ b/Vue_Full_Project/src/views/Dashboard.vue
@@ -81,12 +81,12 @@
           <h4 class="card-title mb-0">Traffic</h4>
           <div class="small text-muted">November 2016</div>
         </div><!--/.col-->
-        <div class="col-sm-7 hidden-sm-down">
+        <div class="col-sm-7 d-none d-md-block">
           <b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
           <b-button-toolbar class="float-right" aria-label="Toolbar with button groups">
             <b-button-group class="mr-3" aria-label="First group">
               <b-button variant="outline-secondary">Day</b-button>
-              <b-button variant="outline-secondary" :active="true">Month</b-button>
+              <b-button variant="outline-secondary" :pressed="true">Month</b-button>
               <b-button variant="outline-secondary">Year</b-button>
             </b-button-group>
           </b-button-toolbar>
@@ -288,7 +288,7 @@
                   </div>
                 </li>
                 <li class="legend">
-                  <span class="badge badge-pill badge-info"></span> <small>New clients</small> &nbsp; <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
+                  <b-badge pill variant="info"></b-badge> <small>New clients</small> &nbsp; <b-badge pill variant="danger"></b-badge> <small>Recurring clients</small>
                 </li>
               </ul>
             </div><!--/.col-->
@@ -502,13 +502,11 @@
             :fields="tableFields"
             head-variant="default"
             >
-            <template slot="avatar" scope="item">
-              <div class="avatar">
-                <img :src="item.value.url" class="img-avatar" alt="">
-                <span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success',  'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
-              </div>
-            </template>
-            <template slot="user" scope="item">
+            <div slot="avatar" class="avatar" slot-scope="item">
+              <img :src="item.value.url" class="img-avatar" alt="">
+              <span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success',  'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
+            </div>
+            <div slot="user" slot-scope="item">
               <div>{{item.value.name}}</div>
               <div class="small text-muted">
                 <span>
@@ -516,11 +514,9 @@
                   <template v-else>Recurring</template>
                 </span> | Registered: {{item.value.registered}}
               </div>
-            </template>
-            <template slot="country" scope="item">
-              <img :src="item.value.flag" :alt="item.value.name" style="height:24px;">
-            </template>
-            <template slot="usage" scope="item">
+            </div>
+            <img slot="country" slot-scope="item" :src="item.value.flag" :alt="item.value.name" style="height:24px;">
+            <div slot="usage" slot-scope="item">
               <div class="clearfix">
                 <div class="float-left">
                   <strong>{{item.value.value}}%</strong>
@@ -530,14 +526,12 @@
                 </div>
               </div>
               <b-progress class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
-            </template>
-            <template slot="payment" scope="item">
-              <i :class="item.value.icon" style="font-size:24px"></i>
-            </template>
-            <template slot="activity" scope="item">
+            </div>
+            <i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
+            <div slot="activity" slot-scope="item">
               <div class="small text-muted">Last login</div>
               <strong>{{item.value}}</strong>
-            </template>
+            </div>
           </b-table>
         </b-card>
       </div><!--/.col-->
diff --git a/Vue_Full_Project/src/views/components/Buttons.vue b/Vue_Full_Project/src/views/components/Buttons.vue
index 9384abca..28d120f5 100644
--- a/Vue_Full_Project/src/views/components/Buttons.vue
+++ b/Vue_Full_Project/src/views/components/Buttons.vue
@@ -68,15 +68,15 @@
         </b-card>
         <b-card>
           <div slot="header">
-            <strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
+            <strong>Active state</strong> <small>Add this <code>:pressed="true"</code></small>
           </div>
-          <b-button variant="primary" :active="true">Primary</b-button>
-          <b-button variant="secondary" :active="true">Secondary</b-button>
-          <b-button variant="success" :active="true">Success</b-button>
-          <b-button variant="info" :active="true">Info</b-button>
-          <b-button variant="warning" :active="true">Warning</b-button>
-          <b-button variant="danger" :active="true">Danger</b-button>
-          <b-button variant="link" :active="true">Link</b-button>
+          <b-button variant="primary" :pressed="true">Primary</b-button>
+          <b-button variant="secondary" :pressed="true">Secondary</b-button>
+          <b-button variant="success" :pressed="true">Success</b-button>
+          <b-button variant="info" :pressed="true">Info</b-button>
+          <b-button variant="warning" :pressed="true">Warning</b-button>
+          <b-button variant="danger" :pressed="true">Danger</b-button>
+          <b-button variant="link" :pressed="true">Link</b-button>
         </b-card>
         <b-card>
           <div slot="header">
@@ -152,14 +152,14 @@
         </b-card>
         <b-card>
           <div slot="header">
-            <strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
+            <strong>Active state</strong> <small>Add this <code>:pressed="true"</code></small>
           </div>
-          <b-button variant="outline-primary" :active="true">Primary</b-button>
-          <b-button variant="outline-secondary" :active="true">Secondary</b-button>
-          <b-button variant="outline-success" :active="true">Success</b-button>
-          <b-button variant="outline-info" :active="true">Info</b-button>
-          <b-button variant="outline-warning" :active="true">Warning</b-button>
-          <b-button variant="outline-danger" :active="true">Danger</b-button>
+          <b-button variant="outline-primary" :pressed="true">Primary</b-button>
+          <b-button variant="outline-secondary" :pressed="true">Secondary</b-button>
+          <b-button variant="outline-success" :pressed="true">Success</b-button>
+          <b-button variant="outline-info" :pressed="true">Info</b-button>
+          <b-button variant="outline-warning" :pressed="true">Warning</b-button>
+          <b-button variant="outline-danger" :pressed="true">Danger</b-button>
         </b-card>
         <b-card>
           <div slot="header">
diff --git a/Vue_Full_Project/src/views/components/Cards.vue b/Vue_Full_Project/src/views/components/Cards.vue
index de6415c4..3ce0f449 100644
--- a/Vue_Full_Project/src/views/components/Cards.vue
+++ b/Vue_Full_Project/src/views/components/Cards.vue
@@ -34,7 +34,7 @@
         <b-card>
           <div slot="header">
             Card with label
-            <span class="badge badge-success float-right">Success</span>
+            <b-badge variant="success" class="float-right">Success</b-badge>
           </div>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </b-card>
@@ -43,7 +43,7 @@
         <b-card>
           <div slot="header">
             Card with label
-            <span class="badge badge-pill badge-danger float-right">42</span>
+            <b-badge pill variant="danger" class="float-right">42</b-badge>
           </div>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </b-card>
diff --git a/Vue_Full_Project/src/views/components/Tables.vue b/Vue_Full_Project/src/views/components/Tables.vue
index 79c8dabc..11d7c434 100644
--- a/Vue_Full_Project/src/views/components/Tables.vue
+++ b/Vue_Full_Project/src/views/components/Tables.vue
@@ -18,7 +18,7 @@
                 <td>2012/01/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
               <tr>
@@ -26,7 +26,7 @@
                 <td>2012/02/01</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-danger">Banned</span>
+                  <b-badge variant="danger">Banned</b-badge>
                 </td>
               </tr>
               <tr>
@@ -34,7 +34,7 @@
                 <td>2012/02/01</td>
                 <td>Admin</td>
                 <td>
-                  <span class="badge badge-secondary">Inactive</span>
+                  <b-badge variant="secondary">Inactive</b-badge>
                 </td>
               </tr>
               <tr>
@@ -42,7 +42,7 @@
                 <td>2012/03/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-warning">Pending</span>
+                  <b-badge variant="warning">Pending</b-badge>
                 </td>
               </tr>
               <tr>
@@ -50,7 +50,7 @@
                 <td>2012/01/21</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
             </tbody>
@@ -85,7 +85,7 @@
                 <td>2012/01/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
               <tr>
@@ -93,7 +93,7 @@
                 <td>2012/02/01</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-danger">Banned</span>
+                  <b-badge variant="danger">Banned</b-badge>
                 </td>
               </tr>
               <tr>
@@ -101,7 +101,7 @@
                 <td>2012/02/01</td>
                 <td>Admin</td>
                 <td>
-                  <span class="badge badge-secondary">Inactive</span>
+                  <b-badge variant="secondary">Inactive</b-badge>
                 </td>
               </tr>
               <tr>
@@ -109,7 +109,7 @@
                 <td>2012/03/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-warning">Pending</span>
+                  <b-badge variant="warning">Pending</b-badge>
                 </td>
               </tr>
               <tr>
@@ -117,7 +117,7 @@
                 <td>2012/01/21</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
             </tbody>
@@ -155,7 +155,7 @@
                 <td>2012/01/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
               <tr>
@@ -163,7 +163,7 @@
                 <td>2012/02/01</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-danger">Banned</span>
+                  <b-badge variant="danger">Banned</b-badge>
                 </td>
               </tr>
               <tr>
@@ -171,7 +171,7 @@
                 <td>2012/02/01</td>
                 <td>Admin</td>
                 <td>
-                  <span class="badge badge-secondary">Inactive</span>
+                  <b-badge variant="secondary">Inactive</b-badge>
                 </td>
               </tr>
               <tr>
@@ -179,7 +179,7 @@
                 <td>2012/03/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-warning">Pending</span>
+                  <b-badge variant="warning">Pending</b-badge>
                 </td>
               </tr>
               <tr>
@@ -187,7 +187,7 @@
                 <td>2012/01/21</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
             </tbody>
@@ -222,7 +222,7 @@
                 <td>2012/01/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
               <tr>
@@ -230,7 +230,7 @@
                 <td>2012/02/01</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-danger">Banned</span>
+                  <b-badge variant="danger">Banned</b-badge>
                 </td>
               </tr>
               <tr>
@@ -238,7 +238,7 @@
                 <td>2012/02/01</td>
                 <td>Admin</td>
                 <td>
-                  <span class="badge badge-secondary">Inactive</span>
+                  <b-badge variant="secondary">Inactive</b-badge>
                 </td>
               </tr>
               <tr>
@@ -246,7 +246,7 @@
                 <td>2012/03/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-warning">Pending</span>
+                  <b-badge variant="warning">Pending</b-badge>
                 </td>
               </tr>
               <tr>
@@ -254,7 +254,7 @@
                 <td>2012/01/21</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
             </tbody>
@@ -292,7 +292,7 @@
                 <td>2012/01/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
               <tr>
@@ -300,7 +300,7 @@
                 <td>2012/02/01</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-danger">Banned</span>
+                  <b-badge variant="danger">Banned</b-badge>
                 </td>
               </tr>
               <tr>
@@ -308,7 +308,7 @@
                 <td>2012/02/01</td>
                 <td>Admin</td>
                 <td>
-                  <span class="badge badge-secondary">Inactive</span>
+                  <b-badge variant="secondary">Inactive</b-badge>
                 </td>
               </tr>
               <tr>
@@ -316,7 +316,7 @@
                 <td>2012/03/01</td>
                 <td>Member</td>
                 <td>
-                  <span class="badge badge-warning">Pending</span>
+                  <b-badge variant="warning">Pending</b-badge>
                 </td>
               </tr>
               <tr>
@@ -324,7 +324,7 @@
                 <td>2012/01/21</td>
                 <td>Staff</td>
                 <td>
-                  <span class="badge badge-success">Active</span>
+                  <b-badge variant="success">Active</b-badge>
                 </td>
               </tr>
             </tbody>
diff --git a/Vue_Starter/package.json b/Vue_Starter/package.json
index 3efd4b46..5317c798 100644
--- a/Vue_Starter/package.json
+++ b/Vue_Starter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
   "private": true,
diff --git a/Vue_Starter/scss/core/_dropdown-menu-right.scss b/Vue_Starter/scss/core/_dropdown-menu-right.scss
index 427ab598..4f195468 100644
--- a/Vue_Starter/scss/core/_dropdown-menu-right.scss
+++ b/Vue_Starter/scss/core/_dropdown-menu-right.scss
@@ -5,4 +5,4 @@
       right: auto;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/Vue_Starter/scss/core/_footer.scss b/Vue_Starter/scss/core/_footer.scss
index 1c1748b4..e01595a1 100644
--- a/Vue_Starter/scss/core/_footer.scss
+++ b/Vue_Starter/scss/core/_footer.scss
@@ -1,9 +1,9 @@
 .app-footer {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding: 0 $spacer;
   color: $footer-color;
   background: $footer-bg;
-  flex-wrap: wrap;
-  align-items: center;
   @include borders($footer-borders);
 }
diff --git a/Vue_Starter/scss/core/_layout.scss b/Vue_Starter/scss/core/_layout.scss
index 6e4034db..8cc54dd7 100644
--- a/Vue_Starter/scss/core/_layout.scss
+++ b/Vue_Starter/scss/core/_layout.scss
@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
+  min-height: 100vh;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  overflow-x: hidden;
   flex-grow: 1;
+  overflow-x: hidden;
 
   .main {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 
   .sidebar {
@@ -269,9 +269,11 @@ app-root {
 .footer-fixed {
   .app-footer {
     position: fixed;
+    right: 0;
     bottom: 0;
+    left: 0;
     z-index: $zindex-sticky;
-    width: 100%;
+    height: $footer-height;
   }
 
   .app-body {
@@ -328,17 +330,26 @@ app-root {
     margin-top: $navbar-height;
   }
 
+  .breadcrumb-fixed {
+    .main:nth-child(2) .breadcrumb {
+      right: auto;
+      left: auto;
+      width: 100%;
+    }
+  }
+
   .sidebar,
   .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
-    height: 100%;
+    // height: 100%;
     margin-left: - $mobile-sidebar-width;
 
     .sidebar-nav,
     .nav {
       width: $mobile-sidebar-width !important;
+      height: calc(100vh - #{$navbar-height});
     }
 
     .sidebar-minimizer {
@@ -364,10 +375,6 @@ app-root {
     .sidebar {
       width: $mobile-sidebar-width;
       margin-left: 0;
-
-      .sidebar-nav {
-        height: calc(100vh - #{$navbar-height});
-      }
     }
 
     .main {
@@ -375,11 +382,4 @@ app-root {
       margin-left: $mobile-sidebar-width !important;
     }
   }
-
-  .breadcrumb-fixed {
-    .main .breadcrumb {
-      right: 0 !important;
-      left: 0 !important;
-    }
-  }
 }
diff --git a/Vue_Starter/scss/core/_navbar.scss b/Vue_Starter/scss/core/_navbar.scss
index 780d66ab..221ab126 100644
--- a/Vue_Starter/scss/core/_navbar.scss
+++ b/Vue_Starter/scss/core/_navbar.scss
@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  height: $navbar-height;
   flex-direction: row;
+  height: $navbar-height;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -22,7 +22,17 @@
   }
 
   .navbar-toggler {
-    color: $navbar-color;
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
   }
 
   .navbar-nav {
diff --git a/Vue_Starter/scss/core/_sidebar.scss b/Vue_Starter/scss/core/_sidebar.scss
index 3f83a0dc..b77cd5f8 100644
--- a/Vue_Starter/scss/core/_sidebar.scss
+++ b/Vue_Starter/scss/core/_sidebar.scss
@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    min-height: 100%;
     flex-direction: column;
+    min-height: 100%;
   }
 
   .nav-title {
diff --git a/Vue_Starter/scss/core/_variables.scss b/Vue_Starter/scss/core/_variables.scss
index a2bebe86..ea491eb5 100644
--- a/Vue_Starter/scss/core/_variables.scss
+++ b/Vue_Starter/scss/core/_variables.scss
@@ -69,6 +69,9 @@ $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
 $navbar-disabled-color:               $gray-300 !default;
 
+$navbar-toggler-icon:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-toggler-icon-hover:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+
 // Sidebar
 
 $sidebar-width:                       200px !default;
diff --git a/Vue_Starter/scss/style.scss b/Vue_Starter/scss/style.scss
index 151efffb..ebd2d6a2 100644
--- a/Vue_Starter/scss/style.scss
+++ b/Vue_Starter/scss/style.scss
@@ -1,10 +1,11 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.1
+ * @version v1.0.2
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
  */
+
 // Override Boostrap variables
 @import "bootstrap-variables";
 
diff --git a/Vue_Starter/src/components/Breadcrumb.vue b/Vue_Starter/src/components/Breadcrumb.vue
index a87bfbfc..87fde93b 100644
--- a/Vue_Starter/src/components/Breadcrumb.vue
+++ b/Vue_Starter/src/components/Breadcrumb.vue
@@ -1,7 +1,8 @@
 <template>
   <ol class="breadcrumb">
-    <li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
-      <router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
+    <li class="breadcrumb-item" v-for="(item, index) in list">
+      <span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
+      <router-link :to="item" v-else>{{ showName(item) }}</router-link>
     </li>
   </ol>
 </template>
diff --git a/Vue_Starter/src/components/Header.vue b/Vue_Starter/src/components/Header.vue
index 50b44ca6..726bbed1 100644
--- a/Vue_Starter/src/components/Header.vue
+++ b/Vue_Starter/src/components/Header.vue
@@ -1,9 +1,15 @@
 <template>
   <header class="app-header navbar">
-    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
+    <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 mr-auto" type="button" @click="sidebarToggle">&#9776;</button>
-    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
+    <button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <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>
diff --git a/package.json b/package.json
index abc7b5a6..214cc40a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Open Source Vue Admin Template",
   "main": "",
   "homepage": "http://coreui.io/vue/",