diff --git a/frontend/src/App.css b/frontend/src/App.css index aed50ce..a1ed6b7 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -347,7 +347,7 @@ padding-left: 0; } -/* ===== Мобильный сайдбар: оверлей и бэкдроп (Tabler-style) ===== */ +/* ===== Мобильный сайдбар: верхняя полоса + оверлей меню (Tabler-style) ===== */ .sidebar-backdrop { position: fixed; inset: 0; @@ -361,6 +361,45 @@ body.sidebar-overlay-open { } @media (max-width: 767.98px) { + /* На мобильных: колоночный layout — сайдбар сверху как полоса, контент на всю ширину снизу */ + .page { + display: flex; + flex-direction: column; + } + .page .navbar-vertical { + position: relative; + width: 100% !important; + max-width: 100% !important; + min-height: auto !important; + flex-shrink: 0; + flex-direction: row; + align-items: center; + } + .page .navbar-vertical > .container-fluid { + flex-direction: row !important; + flex-wrap: nowrap; + width: 100%; + min-height: 3.5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .page .navbar-vertical .navbar-brand { + flex-shrink: 0; + margin-right: 0.5rem; + } + .page .navbar-vertical .navbar-brand .fw-bold { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 12rem; + } + .page .navbar-vertical .navbar-nav.flex-row { + margin-left: auto; + } + .page .navbar-vertical .navbar-toggler { + padding: 0.5rem; + } + /* Меню скрыто по умолчанию, при открытии — оверлей слева */ .page .navbar-vertical .navbar-collapse { position: fixed; top: 0; @@ -376,12 +415,16 @@ body.sidebar-overlay-open { -webkit-overflow-scrolling: touch; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); flex-direction: column; + display: none; } .page .navbar-vertical .navbar-collapse.show { display: flex !important; } .page-wrapper { margin-left: 0 !important; + flex: 1; + min-width: 0; + width: 100%; } .navbar-vertical .nav-link, .navbar-vertical .dropdown-item {