init

src/styles/sidebar.scss

@@ -8,6 +8,7 @@
   }
 
   .sidebar-container {
+    box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
     transition: width 0.28s;
     width: $sideBarWidth !important;
     background-color: $menuBg;
@@ -73,7 +74,14 @@
     .el-submenu__title {
       &:hover {
         background-color: $menuHover !important;
-        color: $subMenuActiveText !important;
+        position: relative;
+        &::before {
+          content: '';
+          position: absolute;
+          background-color: var(--theme-color);
+          inset: 0 0 0 0;
+          opacity: 0.36;
+        }
       }
     }
     .el-submenu .is-active{
@@ -82,10 +90,17 @@
 
     .is-active{
        background-color: $menuActiveBg !important;
-       //border-right: 5px solid $subMenuActiveText !important;
+       position: relative;
+       &::before {
+         content: '';
+         position: absolute;
+         background-color: var(--theme-color);
+         inset: 0 0 0 0;
+         opacity: 0.36;
+       }
     }
         .is-active>.el-submenu__title {
-          color: $subMenuActiveText !important;
+          color: var(--theme-color) !important;
         }
 
 
@@ -95,12 +110,29 @@
       background-color: $subMenuBg !important;
 
       &:hover {
-        background-color: $subMenuHover !important;
-        color: $subMenuActiveText !important;
+        // background-color: $subMenuHover !important;
+        color: var(--theme-color) !important;
+        position: relative;
+        &::before {
+          content: '';
+          position: absolute;
+          background-color: var(--theme-color);
+          inset: 0 0 0 0;
+          opacity: 0.36;
+        }
       }
       &.is-active{
-         background-color: $submenuActiveBg !important;
-         border-right: 5px solid $subMenuActiveText !important;
+        position: relative;
+        //background-color: $submenuActiveBg !important;
+        border-right: 5px solid var(--theme-color) !important;
+
+        &::before {
+          content: '';
+          position: absolute;
+          background-color: var(--theme-color);
+          inset: 0 0 0 0;
+          opacity: 0.36;
+        }
       }
     }
   }
@@ -216,7 +248,15 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: $menuHover !important;
+      //background-color: $menuHover !important;
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        background-color: var(--theme-color);
+        inset: 0 0 0 0;
+        opacity: 0.36;
+      }
     }
   }