refactor(App): improve vertical sidebar styling and dropdown behavior for enhanced user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m53s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m53s
This commit is contained in:
@@ -6,6 +6,23 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Сайдбар: у бренда убираем лишний отступ и стрелку (Tabler не должен добавлять caret к brand) */
|
||||||
|
.navbar-vertical .navbar-brand {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.navbar-vertical .navbar-brand::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.navbar-vertical > .container-fluid {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
/* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
|
||||||
|
.navbar-vertical .nav-link:not(.dropdown-toggle)::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Sidebar: nav-link with icon (Tabler vertical) */
|
/* Sidebar: nav-link with icon (Tabler vertical) */
|
||||||
.navbar-vertical .nav-link {
|
.navbar-vertical .nav-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -147,10 +147,12 @@ function MainLayout() {
|
|||||||
tools: false
|
tools: false
|
||||||
});
|
});
|
||||||
|
|
||||||
// Закрытие всех выпадающих меню при клике вне их области
|
// Закрытие выпадающих меню только при клике в сайдбаре вне открытого меню (клики по странице не закрывают)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (event) => {
|
const handleClickOutside = (event) => {
|
||||||
if (!event.target.closest('.nav-item.dropdown')) {
|
const inSidebar = event.target.closest('.navbar-vertical');
|
||||||
|
const inDropdown = event.target.closest('.nav-item.dropdown');
|
||||||
|
if (inSidebar && !inDropdown) {
|
||||||
setDropdownStates({
|
setDropdownStates({
|
||||||
data: false,
|
data: false,
|
||||||
management: false,
|
management: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user