refactor: change brand logos

src/assets/icons/icons.js

@@ -79,9 +79,11 @@ import {
   cilXCircle
 
 } from '@coreui/icons'
+import { logo } from './logo'
 
 export const iconsSet = Object.assign(
   {},
+  { logo },
   {
     cilArrowRight,
     cilBan,

src/containers/TheHeader.vue

@@ -10,13 +10,9 @@
       class="ml-3 d-md-down-none"
       v-c-emit-root-event:toggle-sidebar
     />
-    <CHeaderBrand
-      class="mx-auto d-lg-none" 
-      src="img/brand/coreui-vue-logo.svg"
-      width="190"
-      height="46"
-      alt="CoreUI Logo"
-    />
+    <CHeaderBrand class="mx-auto d-lg-none" to="/">
+      <CIcon name="logo" height="48" alt="Logo"/>
+    </CHeaderBrand>
     <CHeaderNav class="d-md-down-none mr-auto">
       <CHeaderNavItem class="px-3">
         <CHeaderNavLink to="/dashboard">

src/containers/TheSidebar.vue

@@ -4,11 +4,16 @@
     :minimize="minimize"
     :show.sync="show"
   >
-    <CSidebarBrand 
-      :imgFull="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-base-white.svg'}"
-      :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
-      :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
-    />
+    <CSidebarBrand class="d-md-down-none" to="/">
+      <CIcon 
+        class="d-block" 
+        name="logo" 
+        size="custom-size" 
+        :height="35" 
+        :viewBox="`0 0 ${minimize ? 110 : 556} 134`"
+      />
+    </CSidebarBrand>
+
     <CRenderFunction flat :content-to-render="nav"/>
     <CSidebarMinimizer
       class="d-md-down-none"

src/main.js

@@ -2,7 +2,7 @@ import 'core-js/stable'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-import CoreuiVue from '@coreui/vue'
+import CoreuiVue from '@coreui/vue/src'
 import { iconsSet as icons } from './assets/icons/icons.js'
 
 Vue.config.performance = true
@@ -15,5 +15,5 @@ new Vue({
   template: '<App/>',
   components: {
     App
-  },
+  }
 })

src/store.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+const state = {
+  showSidebar: 'responsive'
+}
+
+const mutations = {
+  toggleSidebarDesktop (state) {
+    const sidebarOpened = [true, 'responsive'].includes(state.showSidebar)
+    state.showSidebar = sidebarOpened ? false : 'responsive'
+  },
+  toggleSidebarMobile (state) {
+    const sidebarClosed = [false, 'responsive'].includes(state.showSidebar)
+    state.showSidebar = sidebarClosed ? true : 'responsive'
+  },
+  set (state, [variable, value]) {
+    state[variable] = value
+  }
+}
+
+export default new Vuex.Store({
+  state,
+  mutations
+})