Update 优化侧边栏

UI/VAP_V3.VUE/src/assets/sass/layout/_variables.custom.scss

@@ -21,7 +21,7 @@ $app-container-padding-x-mobile: 10px;
 $app-header-base-height: 74px;
 $app-header-base-height-mobile: 60px;
 $app-header-base-bg-color: transparent;
-$app-header-base-bg-color-dark: #131313;
+$app-header-base-bg-color-dark: #202b46;
 $app-header-base-bg-color-mobile: $app-header-base-bg-color;
 $app-header-base-bg-color-mobile-dark: $app-header-base-bg-color-dark;
 $app-header-base-box-shadow: none;
@@ -40,7 +40,7 @@ $app-header-light-separator-color: #e4e6ef;
 $app-header-light-separator-color-dark: $border-color-dark;
 
 // Header dark
-$app-header-dark-bg-color: #131313;
+$app-header-dark-bg-color: #202b46;
 $app-header-dark-separator-color: #282a3d;
 $app-header-dark-scrollbar-color: #3b3b64;
 $app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
@@ -64,7 +64,7 @@ $app-sidebar-minimize-width: 75px;
 
 // Sidebar light
 $app-sidebar-light-bg-color: $body-bg;
-$app-sidebar-light-bg-color-dark: #131313;
+$app-sidebar-light-bg-color-dark: #202b46;
 
 $app-sidebar-light-box-shadow: 0 0 28px 0 rgba(82, 63, 105, 0.05);
 $app-sidebar-light-box-shadow-dark: none;
@@ -86,18 +86,18 @@ $app-sidebar-light-header-menu-link-bg-color-active: #f7f8fb;
 $app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
 
 // Sidebar dark
-$app-sidebar-dark-bg-color: #131313;
+$app-sidebar-dark-bg-color: #202b46;
 $app-sidebar-dark-separator-color: #393945;
 $app-sidebar-dark-scrollbar-color-hover: lighten($app-sidebar-dark-separator-color, 2%);
 $app-sidebar-dark-menu-heading-color: #626671;
-$app-sidebar-dark-menu-sub-link-color: #888a8e;
-$app-sidebar-dark-menu-link-bg-color-active: #1c1c21;
+$app-sidebar-dark-menu-sub-link-color: #8d98af;
+$app-sidebar-dark-menu-link-bg-color-active: #3e97ff;
 
 // Aside base
 $app-aside-base-width: 320px;
 $app-aside-base-width-mobile: 300px;
 $app-aside-base-bg-color: $body-bg;
-$app-aside-base-bg-color-dark: #131313;
+$app-aside-base-bg-color-dark: #202b46;
 $app-aside-base-gap-end: $app-container-padding-x;
 $app-aside-base-gap-top: $app-container-padding-x;
 $app-aside-base-gap-bottom: $app-container-padding-x;
@@ -105,7 +105,7 @@ $app-aside-base-gap-bottom: $app-container-padding-x;
 // Toolbar base
 $app-toolbar-base-height: 55px;
 $app-toolbar-base-bg-color: $body-bg;
-$app-toolbar-base-bg-color-dark: #131313;
+$app-toolbar-base-bg-color-dark: #202b46;
 $app-toolbar-base-box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.05);
 $app-toolbar-base-box-shadow-dark: none;
 $app-toolbar-base-border-top: 1px dashed $border-dashed-color;

UI/VAP_V3.VUE/src/assets/sass/layout/sidebar/_sidebar-dark.scss

@@ -3,120 +3,127 @@
 //
 
 [data-vb-app-layout="dark-sidebar"] {
-    .app-sidebar {
-        background-color: $app-sidebar-dark-bg-color;
-        border-right: 0;
+	.app-sidebar {
+		background-color: $app-sidebar-dark-bg-color;
+		border-right: 0;
 
-        .scroll-y,
-        .hover-scroll-overlay-y {        
-            @include scrollbar-color(transparent, $app-sidebar-dark-scrollbar-color-hover);
-        }
+		.scroll-y,
+		.hover-scroll-overlay-y {
+			@include scrollbar-color(transparent, $app-sidebar-dark-scrollbar-color-hover);
+		}
 
-        .app-sidebar-logo {
-            border-bottom: 1px dashed $app-sidebar-dark-separator-color;
-        }
+		.app-sidebar-logo {
+			border-bottom: 1px dashed $app-sidebar-dark-separator-color;
+		}
 
-        .btn-custom {
-            @include button-custom-variant(
-                $color:#B5B5C3, 
-                $icon-color: #B5B5C3, 
-                $border-color: null, 
-                $bg-color: rgba(63, 66, 84, 0.35), 
-                $color-active: #B5B5C3, 
-                $icon-color-active: null, 
-                $border-color-active: null, 
-                $bg-color-active: rgba(63, 66, 84, 0.35)
-            );
-        }
+		.btn-custom {
+			@include button-custom-variant(
+				$color: #b5b5c3,
+				$icon-color: #b5b5c3,
+				$border-color: null,
+				$bg-color: rgba(63, 66, 84, 0.35),
+				$color-active: #b5b5c3,
+				$icon-color-active: null,
+				$border-color-active: null,
+				$bg-color-active: rgba(63, 66, 84, 0.35)
+			);
+		}
 
-        .menu {
-            > .menu-item {                    
-                .menu-heading {
-                    color: $app-sidebar-dark-menu-heading-color !important;
-                }
+		.menu {
+			> .menu-item {
+				.menu-heading {
+					color: $app-sidebar-dark-menu-heading-color !important;
+				}
 
-                @include menu-link-default-state( 
-                    $title-color: $gray-300, 
-                    $icon-color:  #7F8194, 
-                    $bullet-color:#7F8194,  
-                    $arrow-color: var(--#{$prefix}gray-700), 
-                    $bg-color: null 
-                );
-                
-                @include menu-link-hover-state( 
-                    $title-color: var(--#{$prefix}primary-inverse), 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}primary-inverse), 
-                    $bg-color: null
-                );
-                
-                @include menu-link-here-state( 
-                    $title-color: $gray-300, 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}gray-700), 
-                    $bg-color: null
-                );
-                
-                @include menu-link-show-state( 
-                    $title-color: $gray-300, 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}gray-700), 
-                    $bg-color: null
-                );
-                
-                @include menu-link-active-state( 
-                    $title-color: var(--#{$prefix}primary-inverse), 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}primary-inverse), 
-                    $bg-color: $app-sidebar-dark-menu-link-bg-color-active
-                );
+				@include menu-link-default-state(
+					$title-color: #8d98af,
+					$icon-color: #7f8194,
+					$bullet-color: #7f8194,
+					$arrow-color: var(--#{$prefix}gray-700),
+					$bg-color: null
+				);
 
-                .menu-sub {
-                    .menu-item {
-                        .menu-link {
-                            .menu-title {
-                                color: $app-sidebar-dark-menu-sub-link-color;
-                            }
+				@include menu-link-hover-state(
+					$title-color: var(--#{$prefix}primary-inverse),
+					$icon-color: var(--#{$prefix}primary-inverse),
+					$bullet-color: var(--#{$prefix}primary-inverse),
+					$arrow-color: var(--#{$prefix}primary-inverse),
+					$bg-color: null
+				);
 
-                            &.active {
-                                .menu-title {
-                                    color: var(--#{$prefix}white);
-                                } 
-                                
-                                .menu-bullet {
-                                    .bullet {
-                                        background-color: var(--#{$prefix}white);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    } 
+				@include menu-link-here-state(
+					$title-color: #8d98af,
+					$icon-color: var(--#{$prefix}primary-inverse),
+					$bullet-color: var(--#{$prefix}primary-inverse),
+					$arrow-color: var(--#{$prefix}gray-700),
+					$bg-color: null
+				);
+
+				@include menu-link-show-state(
+					$title-color: #8d98af,
+					$icon-color: var(--#{$prefix}primary-inverse),
+					$bullet-color: var(--#{$prefix}primary-inverse),
+					$arrow-color: var(--#{$prefix}gray-700),
+					$bg-color: null
+				);
+
+				@include menu-link-active-state(
+					$title-color: var(--#{$prefix}primary-inverse),
+					$icon-color: var(--#{$prefix}primary-inverse),
+					$bullet-color: var(--#{$prefix}primary-inverse),
+					$arrow-color: var(--#{$prefix}primary-inverse),
+					$bg-color: $app-sidebar-dark-menu-link-bg-color-active
+				);
+				&.menu-accordion {
+					&.active,
+					&.show {
+						.menu-title {
+							color: #ffffff;
+						}
+					}
+				}
+				.menu-sub {
+					.menu-item {
+						.menu-link {
+							.menu-title {
+								color: $app-sidebar-dark-menu-sub-link-color;
+							}
+
+							&.active {
+								.menu-title {
+									color: var(--#{$prefix}white);
+								}
+
+								.menu-bullet {
+									.bullet {
+										background-color: var(--#{$prefix}white);
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 // Desktop mode
 @include media-breakpoint-up(lg) {
-    [data-vb-app-layout="dark-sidebar"] {
-        .app-sidebar {
-            .menu-sub-lg-dropdown {
-                background-color: $app-sidebar-dark-bg-color;
-            }
-        }
-    }
+	[data-vb-app-layout="dark-sidebar"] {
+		.app-sidebar {
+			.menu-sub-lg-dropdown {
+				background-color: $app-sidebar-dark-bg-color;
+			}
+		}
+	}
 }
 
 // Dark mode
 @include color-mode(dark) {
-    [data-vb-app-layout="dark-sidebar"] {
-        .app-sidebar {
-            border-right: 1px dashed $app-sidebar-dark-separator-color;
-        }
-    }
-}
+	[data-vb-app-layout="dark-sidebar"] {
+		.app-sidebar {
+			border-right: 1px dashed $app-sidebar-dark-separator-color;
+		}
+	}
+}

UI/VAP_V3.VUE/src/assets/sass/layout/sidebar/_sidebar-light.scss

@@ -3,103 +3,106 @@
 //
 
 [data-vb-app-layout="light-sidebar"] {
-    .app-sidebar {
-        background-color: var(--#{$prefix}app-sidebar-light-bg-color);
-        border-right: 1px solid var(--#{$prefix}gray-200);
+	.app-sidebar {
+		background-color: var(--#{$prefix}app-sidebar-light-bg-color);
+		border-right: 1px solid var(--#{$prefix}gray-200);
 
-        .scroll-y,
-        .hover-scroll-overlay-y {        
-            @include scrollbar-color(transparent, var(--#{$prefix}app-sidebar-light-scrollbar-color-hover));
-        }
+		.scroll-y,
+		.hover-scroll-overlay-y {
+			@include scrollbar-color(
+				transparent,
+				var(--#{$prefix}app-sidebar-light-scrollbar-color-hover)
+			);
+		}
 
-        .app-sidebar-logo {
-            border-bottom: 0;
-        }
+		.app-sidebar-logo {
+			border-bottom: 0;
+		}
 
-        .app-sidebar-toggle {
-            border-radius: 50%;    
-            box-shadow: none !important;
-        }
+		.app-sidebar-toggle {
+			border-radius: 50%;
+			box-shadow: none !important;
+		}
 
-        .menu {
-            font-weight: $font-weight-semibold;
+		.menu {
+			font-weight: $font-weight-semibold;
 
-            .menu-item {                    
-                .menu-heading {
-                    color: var(--#{$prefix}app-sidebar-light-menu-heading-color) !important;
-                }
+			.menu-item {
+				.menu-heading {
+					color: var(--#{$prefix}app-sidebar-light-menu-heading-color) !important;
+				}
 
-                @include menu-link-default-state( 
-                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color), 
-                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
-                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
-                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
-                    $bg-color: null  
-                );
-                
-                @include menu-link-hover-state( 
-                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color), 
-                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
-                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
-                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
-                    $bg-color: null
-                );
-                
-                @include menu-link-show-state( 
-                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color), 
-                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
-                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
-                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
-                    $bg-color: null
-                );
-                
-                @include menu-link-here-state( 
-                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color),  
-                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
-                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
-                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
-                    $bg-color: null
-                );
+				@include menu-link-default-state(
+					$title-color: var(--#{$prefix}app-sidebar-light-menu-link-color),
+					$icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bg-color: null
+				);
 
-                @include menu-link-active-state( 
-                    $title-color: var(--#{$prefix}primary), 
-                    $icon-color: var(--#{$prefix}primary), 
-                    $bullet-color: var(--#{$prefix}primary), 
-                    $arrow-color: var(--#{$prefix}primary), 
-                    $bg-color: var(--#{$prefix}app-sidebar-light-menu-link-bg-color-active)
-                );
+				@include menu-link-hover-state(
+					$title-color: var(--#{$prefix}app-sidebar-light-menu-link-color),
+					$icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bg-color: null
+				);
 
-                .menu-sub {
-                    .menu-item {
-                        .menu-link {
-                            .menu-title {
-                                color: #4B5675;
-                            }
+				@include menu-link-show-state(
+					$title-color: var(--#{$prefix}app-sidebar-light-menu-link-color),
+					$icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bg-color: null
+				);
 
-                            &.active {
-                                .menu-title {
-                                    color: var(--#{$prefix}primary);
-                                }  
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    } 
+				@include menu-link-here-state(
+					$title-color: var(--#{$prefix}app-sidebar-light-menu-link-color),
+					$icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+					$bg-color: null
+				);
+
+				@include menu-link-active-state(
+					$title-color: var(--#{$prefix}primary),
+					$icon-color: var(--#{$prefix}primary),
+					$bullet-color: var(--#{$prefix}primary),
+					$arrow-color: var(--#{$prefix}primary),
+					$bg-color: var(--#{$prefix}app-sidebar-light-menu-link-bg-color-active)
+				);
+
+				.menu-sub {
+					.menu-item {
+						.menu-link {
+							.menu-title {
+								color: #4b5675;
+							}
+
+							&.active {
+								.menu-title {
+									color: var(--#{$prefix}primary);
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 [data-vb-app-layout="light-sidebar"][data-vb-app-header-fixed="true"] {
-    [data-vb-app-header-minimize=on] .app-header {
-        transition: none;
-        z-index: 100;
-        background-color: var(--bs-app-header-minimize-bg-color);
-        box-shadow: var(--bs-app-header-minimize-box-shadow);
-    } 
+	[data-vb-app-header-minimize="on"] .app-header {
+		transition: none;
+		z-index: 100;
+		background-color: var(--bs-app-header-minimize-bg-color);
+		box-shadow: var(--bs-app-header-minimize-box-shadow);
+	}
 
-    .app-sidebar {
-        .app-sidebar-logo {
-            border-bottom: 0;
-        }
-    }
-}
+	.app-sidebar {
+		.app-sidebar-logo {
+			border-bottom: 0;
+		}
+	}
+}

UI/VAP_V3.VUE/src/layouts/main/sidebar/_SidebarSubItem.vue

@@ -32,7 +32,7 @@ const hasActiveChildren = (match: string) => {
 	</template>
 	<div
 		v-if="menuItem.sectionTitle && menuItem.route && !menuItem.hidden"
-		:class="{ show: hasActiveChildren(menuItem.route) }"
+		:class="{ 'show active': hasActiveChildren(menuItem.route) }"
 		class="menu-item menu-accordion"
 		data-vb-menu-sub="accordion"
 		data-vb-menu-trigger="click">