refactor(App): update vertical sidebar styling to a consistent dark theme, enhancing visual coherence and user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m1s

This commit is contained in:
2026-02-16 15:48:33 +07:00
parent 01a15d97c6
commit 1fe9cf4794
2 changed files with 39 additions and 2 deletions
+37
View File
@@ -6,6 +6,43 @@
min-height: 100vh;
}
/* Сайдбар: всегда тёмный (как на референсе Tabler) */
.navbar-vertical {
--tblr-body-color: rgba(255, 255, 255, 0.9);
--tblr-body-color-rgb: 255, 255, 255;
--tblr-border-color: rgba(255, 255, 255, 0.1);
--tblr-bg-surface: #1e293b;
--tblr-bg-surface-hover: rgba(255, 255, 255, 0.05);
--tblr-navbar-active-bg: rgba(255, 255, 255, 0.08);
--tblr-navbar-active-color: #fff;
--tblr-primary: #6ea8fe;
--tblr-muted: rgba(255, 255, 255, 0.6);
background-color: #1e293b !important;
color: rgba(255, 255, 255, 0.9);
}
.navbar-vertical .navbar-brand,
.navbar-vertical .nav-link,
.navbar-vertical .dropdown-item {
color: inherit;
}
.navbar-vertical .navbar-brand:hover,
.navbar-vertical .nav-link:hover,
.navbar-vertical .dropdown-item:hover {
color: #fff;
}
.navbar-vertical .nav-link.active,
.navbar-vertical .dropdown-item.active {
background-color: var(--tblr-navbar-active-bg);
color: var(--tblr-navbar-active-color);
}
.navbar-vertical .dropdown-toggle::after {
border-top-color: rgba(255, 255, 255, 0.6);
}
.navbar-vertical .navbar-toggler {
border-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.9);
}
/* Сайдбар: у бренда убираем лишний отступ и стрелку (Tabler не должен добавлять caret к brand) */
.navbar-vertical .navbar-brand {
padding-left: 0;
+2 -2
View File
@@ -400,8 +400,8 @@ function MainLayout() {
Перейти к основному содержанию
</a>
{/* Левая вертикальная навигация (Tabler navbar-vertical) */}
<header className="navbar navbar-vertical navbar-expand-md d-print-none">
{/* Левая вертикальная навигация — всегда тёмная (Tabler navbar-vertical) */}
<header className="navbar navbar-vertical navbar-expand-md d-print-none" data-bs-theme="dark">
<div className="container-fluid">
<Link to="/" className="navbar-brand navbar-brand-autodark">
<IconBrandTabler className="navbar-brand-icon" />