feat(SettingsPage): restructure sidebar navigation into groups for improved organization and usability

frontend/src/App.css

@@ -336,6 +336,16 @@
   min-width: 0;
 }
 
+/* Страница настроек — боковое меню в стиле Tabler Settings */
+.settings-sidebar-nav .list-group-item {
+  font-size: 0.875rem;
+  padding-left: 0;
+}
+.settings-sidebar-nav .dropdown-header {
+  font-size: 0.6875rem;
+  letter-spacing: 0.04em;
+}
+
 /* Responsive navbar */
 @media (max-width: 991.98px) {
   .navbar-collapse {

frontend/src/SettingsPage.jsx

@@ -20,14 +20,30 @@ import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
  * Страница «Настройки интерфейса» — отдельный раздел в стиле Tabler UI и UniFi:
  * коллапсируемые карточки-секции, иконки, чёткая структура.
  */
-// Разделы бокового меню (как в Tabler / UniFi)
-const SIDEBAR_SECTIONS = [
-  { id: 'live-doh', title: 'BGP Live и DoH', icon: IconPlugConnected },
-  { id: 'network-as', title: 'Сеть и AS', icon: IconNetwork },
-  { id: 'ping', title: 'Пинг через MikroTik', icon: IconCloud },
-  { id: 'ping-services', title: 'Пинг на главной', icon: IconChartPie },
-  { id: 'ptr-zone', title: 'PTR зона', icon: IconWorld },
+// Разделы бокового меню с группами (как Tabler Settings: Business settings / Experience)
+const SIDEBAR_GROUPS = [
+  {
+    title: 'Подключения и сеть',
+    items: [
+      { id: 'live-doh', title: 'BGP Live и DoH', icon: IconPlugConnected },
+      { id: 'network-as', title: 'Сеть и AS', icon: IconNetwork },
+    ],
+  },
+  {
+    title: 'Пинг',
+    items: [
+      { id: 'ping', title: 'Пинг через MikroTik', icon: IconCloud },
+      { id: 'ping-services', title: 'Пинг на главной', icon: IconChartPie },
+    ],
+  },
+  {
+    title: 'DNS',
+    items: [
+      { id: 'ptr-zone', title: 'PTR зона', icon: IconWorld },
+    ],
+  },
 ];
+const SIDEBAR_SECTIONS = SIDEBAR_GROUPS.flatMap((g) => g.items);
 
 export default function SettingsPage() {
   const location = useLocation();
@@ -65,12 +81,16 @@ export default function SettingsPage() {
     );
   }, [serversList]);
 
-  const sidebarItems = useMemo(() => {
+  const sidebarGroupsFiltered = useMemo(() => {
     const q = (sidebarSearch || '').trim().toLowerCase();
-    if (!q) return SIDEBAR_SECTIONS;
-    return SIDEBAR_SECTIONS.filter(
-      (s) => s.title.toLowerCase().includes(q) || s.id.toLowerCase().includes(q)
-    );
+    if (!q) return SIDEBAR_GROUPS;
+    return SIDEBAR_GROUPS.map((group) => ({
+      ...group,
+      items: group.items.filter(
+        (s) =>
+          s.title.toLowerCase().includes(q) || s.id.toLowerCase().includes(q)
+      ),
+    })).filter((g) => g.items.length > 0);
   }, [sidebarSearch]);
 
   useEffect(() => {
@@ -302,46 +322,57 @@ export default function SettingsPage() {
           )}
 
           <div className="row">
-            {/* Боковое меню в стиле Tabler / UniFi */}
-            <div className="col-lg-3 col-xl-2 mb-4 mb-lg-0">
-              <div className="card sticky-top" style={{ top: '1rem' }}>
-                <div className="card-body py-2">
-                  <div className="input-icon mb-2">
-                    <span className="input-icon-addon">
-                      <IconSearch size={18} className="text-muted" />
-                    </span>
-                    <input
-                      type="text"
-                      className="form-control"
-                      placeholder="Поиск разделов"
-                      value={sidebarSearch}
-                      onChange={(e) => setSidebarSearch(e.target.value)}
-                      aria-label="Поиск разделов"
-                    />
-                  </div>
-                  <nav className="nav flex-column">
-                    {sidebarItems.map((section) => {
-                      const Icon = section.icon;
-                      const isActive = activeSection === section.id;
-                      return (
-                        <button
-                          key={section.id}
-                          type="button"
-                          className={`nav-link d-flex align-items-center text-start border-0 rounded mb-1 ${isActive ? 'active bg-primary text-white' : ''}`}
-                          onClick={() => goToSection(section.id)}
-                        >
-                          <span className="me-2 d-flex">
-                            <Icon size={18} />
-                          </span>
-                          {section.title}
-                        </button>
-                      );
-                    })}
-                  </nav>
-                  {sidebarItems.length === 0 && (
-                    <p className="text-muted small mb-0 mt-2">Нет подходящих разделов</p>
-                  )}
+            {/* Боковое меню в стиле Tabler Settings (секции + list-group) */}
+            <div className="col-lg-3 col-xl-2 mb-4 mb-lg-0 pe-lg-0">
+              <div
+                className="sticky-top border-end border-1 pe-lg-4 py-3"
+                style={{ top: '1rem' }}
+              >
+                <div className="input-icon mb-3">
+                  <span className="input-icon-addon">
+                    <IconSearch size={18} className="text-muted" />
+                  </span>
+                  <input
+                    type="text"
+                    className="form-control form-control-sm"
+                    placeholder="Поиск разделов"
+                    value={sidebarSearch}
+                    onChange={(e) => setSidebarSearch(e.target.value)}
+                    aria-label="Поиск разделов"
+                  />
                 </div>
+                <nav className="settings-sidebar-nav">
+                  {sidebarGroupsFiltered.map((group) => (
+                    <div key={group.title} className="mb-3">
+                      <div className="dropdown-header small text-uppercase text-muted px-0 pt-1 pb-1">
+                        {group.title}
+                      </div>
+                      <ul className="list-group list-group-flush list-group-transparent">
+                        {group.items.map((section) => {
+                          const Icon = section.icon;
+                          const isActive = activeSection === section.id;
+                          return (
+                            <li key={section.id}>
+                              <button
+                                type="button"
+                                className={`list-group-item list-group-item-action d-flex align-items-center border-0 rounded px-0 py-2 ${isActive ? 'bg-primary-lt text-primary fw-semibold' : 'text-body'}`}
+                                onClick={() => goToSection(section.id)}
+                              >
+                                <span className={`me-2 d-flex ${isActive ? 'text-primary' : 'text-muted'}`}>
+                                  <Icon size={18} />
+                                </span>
+                                {section.title}
+                              </button>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    </div>
+                  ))}
+                </nav>
+                {sidebarGroupsFiltered.length === 0 && (
+                  <p className="text-muted small mb-0 mt-2">Нет подходящих разделов</p>
+                )}
               </div>
             </div>