refactor(App): update vertical sidebar footer layout and styling for improved accessibility and user interaction

frontend/src/App.css

@@ -73,9 +73,24 @@
   flex-shrink: 0;
   border-top-color: rgba(255, 255, 255, 0.1) !important;
 }
-.navbar-vertical .navbar-sidebar-footer .nav-link {
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon {
-  padding-left: 0.75rem;
+  padding: 0.35rem;
-  padding-right: 0.75rem;
+  color: rgba(255, 255, 255, 0.75);
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+}
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon .badge {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.35rem;
+}
+.navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
+  display: none;
 }
 /* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
 .navbar-vertical .nav-link:not(.dropdown-toggle)::after {

frontend/src/App.jsx

@@ -469,31 +469,20 @@ function MainLayout() {
                 </li>
               ))}
             </ul>
-            {/* Кнопки внизу сайдбара: язык, раскладка, тема, горячие клавиши, настройки */}
+            {/* Горизонтальный ряд значков в самом низу сайдбара */}
-            <div className="navbar-sidebar-footer navbar-nav flex-column border-top pt-2 mt-auto">
+            <div className="navbar-sidebar-footer border-top mt-auto">
-              <div className="nav-item dropdown">
+              <div className="d-flex align-items-center justify-content-center gap-1 py-2 px-2">
-                <a
+                <div className="nav-item dropdown dropup">
-                  href="#"
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
-                  className="nav-link dropdown-toggle px-3 py-2"
+                    <span className="badge bg-secondary">{lang.toUpperCase()}</span>
-                  data-bs-toggle="dropdown"
-                  onClick={(e) => e.preventDefault()}
-                  title="Язык"
-                >
-                  <span className="badge">{lang.toUpperCase()}</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>
                 </div>
-              <div className="nav-item dropdown">
+                <div className="nav-item dropdown dropup">
-                <a
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('layoutSidebar')}>
-                  href="#"
-                  className="nav-link dropdown-toggle px-3 py-2"
-                  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">
@@ -505,14 +494,8 @@ function MainLayout() {
                     </a>
                   </div>
                 </div>
-              <div className="nav-item dropdown">
+                <div className="nav-item dropdown dropup">
-                <a
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('light') + ' / ' + t('dark')}>
-                  href="#"
-                  className="nav-link dropdown-toggle px-3 py-2"
-                  data-bs-toggle="dropdown"
-                  onClick={(e) => e.preventDefault()}
-                  title={t('light') + ' / ' + t('dark')}
-                >
                     {theme === 'dark' ? '🌙' : '☀️'}
                   </a>
                   <div className="dropdown-menu dropdown-menu-end">
@@ -521,16 +504,17 @@ function MainLayout() {
                   </div>
                 </div>
                 <div className="nav-item">
-                <KeyboardShortcutsButton className="nav-link px-3 py-2" title="Горячие клавиши" />
+                  <KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
                 </div>
                 <div className="nav-item">
-                <a href="#" className="nav-link px-3 py-2" onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }} title="Настройки">
+                  <a href="#" className="nav-link btn-icon rounded" onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }} title="Настройки">
                     <IconSettings size={20} />
                   </a>
                 </div>
               </div>
             </div>
           </div>
+        </div>
       </header>
 
       {/* Верхний навбар (только тогглер меню на мобильных; кнопки — внизу сайдбара) */}