From 91866cc7ef21f618fb6185293911f62643c7d64f Mon Sep 17 00:00:00 2001
From: Tony <nguyenquangtin@gmail.com>
Date: Sat, 8 Aug 2020 22:44:11 +0700
Subject: [PATCH] 221 - Allow sidebar menu color change from vars

---
 .../js/layout/components/Sidebar/index.vue    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/resources/js/layout/components/Sidebar/index.vue b/resources/js/layout/components/Sidebar/index.vue
index c850bd506..1fba7ab77 100644
--- a/resources/js/layout/components/Sidebar/index.vue
+++ b/resources/js/layout/components/Sidebar/index.vue
@@ -4,12 +4,17 @@
       :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
       mode="vertical"
-      background-color="#304156"
-      text-color="#bfcbd9"
-      active-text-color="#409EFF"
     >
-      <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+      <sidebar-item
+        v-for="route in routes"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
     </el-menu>
   </el-scrollbar>
 </template>
@@ -17,17 +22,18 @@
 <script>
 import { mapGetters } from 'vuex';
 import SidebarItem from './SidebarItem';
+import variables from '@/styles/variables.scss';
 
 export default {
   components: { SidebarItem },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'permission_routers',
-    ]),
+    ...mapGetters(['sidebar', 'permission_routers']),
     routes() {
       return this.$store.state.permission.routes;
     },
+    variables() {
+      return variables;
+    },
     isCollapse() {
       return !this.sidebar.opened;
     },