From 71685ad3106723eab8aa32331408e9edba5bb7a1 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 24 Feb 2026 01:46:57 +0700
Subject: [PATCH] refactor(App): improve dropdown menu styling and
 accessibility in sidebar and language selection components

---
 frontend/src/App.css |  6 +++++-
 frontend/src/App.jsx | 22 +++++++++++-----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 00ffe90..1fe739c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -72,6 +72,7 @@
 .navbar-vertical .navbar-sidebar-footer {
   flex-shrink: 0;
   border-top-color: rgba(255, 255, 255, 0.1) !important;
+  overflow: visible;
 }
 .navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon {
   padding: 0.35rem;
@@ -92,7 +93,10 @@
 .navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
   display: none;
 }
-/* Панель оповещений в футере: без горизонтального скролла, футер карточки в одну линию */
+/* Все выпадающие меню в футере сайдбара — поверх контента и без обрезки */
+.navbar-vertical .navbar-sidebar-footer .dropdown-menu {
+  z-index: 1050;
+}
 .navbar-vertical .navbar-sidebar-footer .dropdown-menu-card {
   overflow-x: hidden;
   box-sizing: border-box;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index b0260be..d7c31bb 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -409,12 +409,12 @@ function MainLayout() {
                 </div>
               </div>
               <div className="nav-item dropdown me-1">
-                <a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
-                  <span className="badge">{lang.toUpperCase()}</span>
+                <a href="#" className="nav-link px-2 dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
+                  <span className="fs-5" aria-hidden>{lang === 'ru' ? '🇷🇺' : '🇺🇸'}</span>
                 </a>
                 <div className="dropdown-menu dropdown-menu-end">
-                  <a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
-                  <a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
+                  <a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}><span className="me-2" aria-hidden>🇷🇺</span>Русский</a>
+                  <a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}><span className="me-2" aria-hidden>🇺🇸</span>English</a>
                 </div>
               </div>
               <div className="nav-item dropdown me-1">
@@ -557,19 +557,19 @@ function MainLayout() {
             <div className="navbar-sidebar-footer border-top mt-auto">
               <div className="d-flex align-items-center justify-content-center gap-1 py-2 px-2">
                 <div className="nav-item dropdown dropup">
-                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
-                    <span className="badge bg-secondary">{lang.toUpperCase()}</span>
+                  <a href="#" className="nav-link btn-icon rounded d-inline-flex align-items-center justify-content-center" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
+                    <span className="fs-5" aria-hidden>{lang === 'ru' ? '🇷🇺' : '🇺🇸'}</span>
                   </a>
-                  <div className="dropdown-menu dropdown-menu-end">
-                    <a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
-                    <a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
+                  <div className="dropdown-menu dropdown-menu-start">
+                    <a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}><span className="me-2" aria-hidden>🇷🇺</span>Русский</a>
+                    <a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}><span className="me-2" aria-hidden>🇺🇸</span>English</a>
                   </div>
                 </div>
                 <div className="nav-item dropdown dropup">
                   <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('layoutSidebar')}>
                     {layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
                   </a>
-                  <div className="dropdown-menu dropdown-menu-end">
+                  <div className="dropdown-menu dropdown-menu-start">
                     <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
                       <IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
                     </a>
@@ -582,7 +582,7 @@ function MainLayout() {
                   <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('light') + ' / ' + t('dark')}>
                     {theme === 'dark' ? '🌙' : '☀️'}
                   </a>
-                  <div className="dropdown-menu dropdown-menu-end">
+                  <div className="dropdown-menu dropdown-menu-start">
                     <a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
                     <a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
                   </div>