updated Sidebar, Navlink, add vue-inline-svg package, updated styles sidebar

Author: Yeliazar

package.json

@@ -58,6 +58,7 @@
     "vue-echarts": "^4.1.0",
     "vue-form-wizard": "^0.8.4",
     "vue-gallery": "^1.5.0",
+    "vue-inline-svg": "^2.1.0",
     "vue-input-tag": "^2.0.7",
     "vue-router": "^3.5.4",
     "vue-select": "^2.6.4",

src/components/Sidebar/NavLink/NavLink.scss

@@ -87,7 +87,7 @@
   align-items: center;
   margin-left: auto;
   margin-right: 22px;
-  color: var(--sidebar-item-active-bg);
+  color: var(--sidebar-color);
 
   i {
     @include transition(transform 0.3s ease-in-out);

src/components/Sidebar/NavLink/NavLink.vue

@@ -2,21 +2,21 @@
   <li v-if="!childrenLinks && isHeader" :class="{headerLink: true, className}">
     <router-link :to="link" class="sidebar-link">
       <span class="icon">
-        <img v-if="iconImg" :src="require('@/assets/' + iconImg + '')" alt="img">
+        <inline-svg v-if="iconImg" :src="require('@/assets/' + iconImg + '')" fill="currentColor"></inline-svg>
         <i v-else :class="fullIconName"></i>
       </span>
       {{header}} <sup v-if="label" :class="'text-' + labelColor" class="headerLabel">{{label}}</sup>
-      <b-badge v-if="badge" class="badge" variant="info" pill>{{badge}}</b-badge>
+      <span v-if="badge" class="badge rounded-pill bg-danger">{{badge}}</span>
     </router-link>
   </li>
   <li v-else-if="childrenLinks" :class="{headerLink: true, className}">
     <div @click="() => togglePanelCollapse(link)">
       <router-link :to="link" event="" class="d-flex sidebar-link">
         <span class="icon">
-          <img v-if="iconImg" :src="require('@/assets/' + iconImg + '')" alt="img">
+          <inline-svg v-if="iconImg" :src="require('@/assets/' + iconImg + '')" fill="currentColor"> </inline-svg>
           <i v-else :class="fullIconName"></i>
         </span>
-        {{header}} <sup v-if="label" :class="'text-' + labelColor" class="ml-1 headerLabel">{{label}}</sup>
+        {{header}} <sup v-if="label" :class="'text-' + labelColor" class="ms-1 headerLabel">{{label}}</sup>
         <div :class="{caretWrapper: true, carretActive: isActive}">
           <i class="fa fa-angle-right" />
         </div>

src/components/Sidebar/Sidebar.vue

@@ -36,7 +36,7 @@
             icon-img="sidebar/Outline/Chat.svg"
             index="chat"
             label="awesome"
-            labelColor="info"
+            labelColor="success"
             isHeader
         />
         <NavLink
@@ -88,7 +88,7 @@
           icon-img="sidebar/Outline/Document.svg"
           index="documentation"
           label="new"
-          labelColor="success"
+          labelColor="info"
           isHeader
         />
         <h5 class="navTitle">TEMPLATE</h5>
@@ -304,10 +304,11 @@
 import { mapState, mapActions } from 'vuex';
 import isScreen from '@/core/screenHelper';
 import NavLink from './NavLink/NavLink';
+import Bank from '../../assets/sidebar/Outline/Bank.svg';
 
 export default {
   name: 'Sidebar',
-  components: { NavLink },
+  components: { NavLink, Bank },
   data() {
     return {
       alerts: [
@@ -326,6 +327,7 @@ export default {
           color: 'primary',
         },
       ],
+      Bank
     };
   },
   methods: {

src/main.js

@@ -19,6 +19,7 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
 import bFormSlider from 'vue-bootstrap-slider';
 import { component as VueCodeHighlight } from 'vue-code-highlight';
 import VueTour from 'vue-tour';
+import InlineSvg from 'vue-inline-svg';
 
 import store from './store';
 import router from './Routes';
@@ -63,6 +64,7 @@ Vue.mixin(layoutMixin);
 Vue.mixin(AuthMixin);
 Vue.use(Toasted, {duration: 10000});
 Vue.use(VueTour);
+Vue.component('inline-svg', InlineSvg);
 
 Vue.config.productionTip = false;
 

src/styles/_theme-variables.scss

@@ -1,17 +1,12 @@
 .root {
   &.sing-dashboard {
-    --logo-color: #6C757D;
     --body-bg: #f9fbfd;
     --light-color: #F6F6E9;
 
     --sidebar-bg-color: #ffffff;
     --sidebar-color: #6c757d;
     --sidebar-action-bg: #f9fafe;
-    --sidebar-item-active: #6C757D; //var(--light-color)
-    --sidebar-item-active-bg: #5CB0FF;
-    --sidebar-badge-bg: #1A86D0;
-
-    --sidebar-nav-title-color: #5287B999;
+    --sidebar-item-active: #C1C3CF; //var(--light-color)
 
     --widget-shadow-color: 75, 102, 171;
 
@@ -23,31 +18,41 @@
     --sidebar-progress-bg-color: var(--sidebar-action-bg);
     --sidebar-icon-active: var(--sidebar-bg-color);
     --sidebar-item-hover-bg-color: var(--sidebar-action-bg);
-    --widget-shadow: 4px 4px 30px rgba(var(--widget-shadow-color), 0.2);
+    //--widget-shadow: 4px 4px 30px rgba(var(--widget-shadow-color), 0.2);
+
+    --input-bg-color: var(--input-bg);
+    --badge-item-color: var(--badge-item);
+    --important-notification: var(--important-notification-color);
+    --update-notification: var(--update-notification-color);
+    --sidebar-item-active-color: var(--sidebar-item-active);
+    --chat-sidebar-bg-color: var(--sidebar-bg-color);
+    --widget-shadow: 0 23px 20px -20px rgba(var(--widget-shadow-color), 0.1), 0 0 15px rgba(var(--widget-shadow-color), 0.06);
 
     &.sidebar-white,
     &.sidebar-transparent {
+      --sidebar-icon-bg: #4A5056;
       --sidebar-bg-color: #ffffff;
       --sidebar-color: #6c757d;
       --sidebar-action-bg: #f9fafe;
-      --logo-color: #0D2B47;
-      --sidebar-item-active: #14191D;
+      --logo-color: #6C757D;
+      --sidebar-item-active: #6C757D;
+      --sidebar-item-active-color: #FFFFFF;
       --sidebar-item-active-bg: #4A5056;
       --sidebar-nav-title-color: #5287B9;
     }
 
     &.sidebar-first {
-      --sidebar-icon-bg: #5CB0FF;
       --sidebar-bg-color: #3D3D3D;
-      --logo-color: #C1C3CF;
+      --logo-color: #5CB0FF;
       --sidebar-item-active: #F6F6E9;
       --sidebar-action-bg: #2D2D2D;
+      --sidebar-item-active-bg: #5CB0FF;
       --sidebar-color: #F6F6E9;
       --sidebar-nav-title-color: #F6F6E9;
     }
 
     &.sidebar-second {
-      --logo-color: #C1C3CF;
+      --logo-color: #fff;
       --sidebar-color: #fff;
       --sidebar-bg-color: #4B505F;
       --sidebar-action-bg: #373C4D;
@@ -56,8 +61,8 @@
     }
 
     &.sidebar-third {
-      --sidebar-icon-bg: #fff;
-      --logo-color: #0C2236;
+      --sidebar-item-active-bg: #5CB0FF;
+      --logo-color: #fff;
       --sidebar-item-active: #F6F6E9;
       --important-notification-color: #fd5f00;
       --sidebar-bg-color: #483CB6;
@@ -66,56 +71,22 @@
     }
 
     &.sidebar-fourth {
-      --logo-color: #0C2236;
+      --sidebar-icon-bg: #6FB0F9;
+      --logo-color: #6FB0F9;
+      --sidebar-item-active: #5A5D76;
       --sidebar-bg-color: #EFF2F5;
       --sidebar-action-bg: #E2E7EC;
       --sidebar-item-active-bg: #6FB0F9;
     }
 
     &.sidebar-fifth {
-      --logo-color: $white;
+      --sidebar-icon-bg: #0D2B47;
+      --logo-color: #0D2B47;
       --sidebar-bg-color: #20AE8C;
       --sidebar-action-bg: #119475;
+      --sidebar-item-active: #F6F6E9;
       --sidebar-item-active-bg: #0D2B47;
-      --sidebar-color: #F6F6E9 !important;
-    }
-
-    //&.sidebar-sixth {
-    //  --sidebar-bg-color: #13191d;
-    //  --sidebar-color: #f6f6e9;
-    //  --sidebar-action-bg: #080c0f;
-    //  --sidebar-item-active-bg: #5CB0FF;
-    //}
-
-    &.sidebar-seventh {
-      --sidebar-bg-color: #20ae8c;
-      --sidebar-color: #f6f6e9;
-      --sidebar-action-bg: #119375;
-      --sidebar-item-active-bg: #0D2B47;
-      --sidebar-badge-bg: #00395f;
-      --logo-color: #0D2B47;
-    }
-
-    &.sidebar-third,
-    &.sidebar-fourth,
-    &.sidebar-fifth,
-    &.sidebar-sixth,
-    &.sidebar-seventh {
-      --sidebar-color: #004472;
-      --sidebar-item-active: var(--sidebar-color);
-    }
-    &.sidebar-second,
-    &.sidebar-third,
-    &.sidebar-fourth,
-    &.sidebar-fifth,
-    &.sidebar-seventh,
-    &.sidebar-transparent {
-      --sidebar-nav-title-color: rgba(82,135,185, 0.6);
-    }
-
-    &.sidebar-sixth,
-    &.sidebar-seventh {
-      --sidebar-color: #f6f6e9;
+      --sidebar-color: #F6F6E9;
     }
 
     &.sidebar-transparent {

yarn.lock

@@ -8641,6 +8641,11 @@ vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
 
+vue-inline-svg@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vue-inline-svg/-/vue-inline-svg-2.1.0.tgz#45f20a34d458636c5caea5da28eef6cad9a87fcb"
+  integrity sha512-80u/BGtjOzXp31yFahXsfvkBrHKHEHKyrkZ42MGoAbD6jHzWpMJLijsyRj66pps7IyKxZcnYkO3ijsJhr4zXsg==
+
 vue-input-tag@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/vue-input-tag/-/vue-input-tag-2.0.7.tgz#daea4db750df34a8c87605f88455dc5f64e1052b"