From c3d41a32d8306a3f2edfc63eb183615c21902fe8 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 17 Feb 2026 15:41:26 +0700
Subject: [PATCH] refactor(SettingsPage): enhance sidebar structure and layout
 for improved navigation and visual consistency

---
 frontend/src/SettingsPage.jsx | 92 +++++++++++++++++------------------
 1 file changed, 44 insertions(+), 48 deletions(-)

diff --git a/frontend/src/SettingsPage.jsx b/frontend/src/SettingsPage.jsx
index 603415e..ca2538f 100644
--- a/frontend/src/SettingsPage.jsx
+++ b/frontend/src/SettingsPage.jsx
@@ -293,58 +293,54 @@ export default function SettingsPage() {
         }
       />
 
-      <div className="row">
-        {/* Сайдбар навигации — как блок в общем стиле страниц */}
-        <div className="col-12 col-md-3 mb-4 mb-md-0">
-          <div className="card card-flat">
+      {/* Вёрстка как на https://preview.tabler.io/settings.html: одна card, row g-0, col-md-3 border-end + col-md-9 */}
+      <div className="card">
+        <div className="row g-0">
+          <div className="col-12 col-md-3 border-end">
             <div className="card-body">
-                  <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 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>
+              {sidebarGroupsFiltered.map((group, idx) => (
+                <div key={group.title} className={idx > 0 ? 'mt-4' : ''}>
+                  <h4 className="subheader">{group.title}</h4>
+                  <div className="list-group list-group-transparent">
+                    {group.items.map((section) => {
+                      const Icon = section.icon;
+                      const isActive = activeSection === section.id;
+                      return (
+                        <button
+                          key={section.id}
+                          type="button"
+                          className={`list-group-item list-group-item-action d-flex align-items-center border-0 ${isActive ? 'active' : ''}`}
+                          onClick={() => goToSection(section.id)}
+                        >
+                          <span className="me-2 d-flex opacity-75">
+                            <Icon size={18} />
+                          </span>
+                          {section.title}
+                        </button>
+                      );
+                    })}
                   </div>
-                  {sidebarGroupsFiltered.map((group, idx) => (
-                    <div key={group.title} className={idx > 0 ? 'mt-4' : ''}>
-                      <h4 className="subheader">{group.title}</h4>
-                      <div className="list-group list-group-transparent">
-                        {group.items.map((section) => {
-                          const Icon = section.icon;
-                          const isActive = activeSection === section.id;
-                          return (
-                            <button
-                              key={section.id}
-                              type="button"
-                              className={`list-group-item list-group-item-action d-flex align-items-center border-0 ${isActive ? 'active' : ''}`}
-                              onClick={() => goToSection(section.id)}
-                            >
-                              <span className="me-2 d-flex opacity-75">
-                                <Icon size={18} />
-                              </span>
-                              {section.title}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ))}
-                  {sidebarGroupsFiltered.length === 0 && (
-                  <p className="text-muted small mb-0">Нет подходящих разделов</p>
-                )}
+                </div>
+              ))}
+              {sidebarGroupsFiltered.length === 0 && (
+                <p className="text-muted small mb-0">Нет подходящих разделов</p>
+              )}
             </div>
           </div>
-        </div>
-
-        {/* Контент раздела — карточка как на других страницах */}
-        <div className="col-12 col-md-9">
-          <div className="card card-flat">
+          <div className="col-12 col-md-9 d-flex flex-column">
             <div className="card-body">
               {activeSection === 'live-doh' && (
               <>