refactor: Simplify App component by removing sidebar functionality and updating navigation structure for improved UI consistency

frontend/src/App.jsx

@@ -1,48 +1,38 @@
 import { useState } from 'react';
-import { Container, Navbar, Tabs, Tab } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import { 
   IconBrandTabler, 
   IconWorld, 
   IconNetwork, 
   IconSettings,
-  IconMenu2,
-  IconX,
   IconHome,
-  IconDatabase,
-  IconUsers,
-  IconBell,
-  IconSearch,
-  IconChevronDown,
-  IconLogout,
-  IconUser,
-  IconDashboard,
   IconFileText,
   IconCloud,
   IconShield,
-  IconActivity
+  IconActivity,
+  IconBell,
+  IconChevronDown,
+  IconUser
 } from '@tabler/icons-react';
 import DataManager from './DataManager';
 import './App.css';
 
 function App() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [activeTab, setActiveTab] = useState('dashboard');
   const [notifications] = useState([
     { id: 1, title: 'Новый домен добавлен', message: 'example.com был добавлен в список', time: '2 мин назад' },
     { id: 2, title: 'Изменения сохранены', message: 'Список AS обновлен в S3', time: '5 мин назад' }
   ]);
 
-  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
-
-  const sidebarItems = [
-    { id: 'dashboard', title: 'Dashboard', icon: IconDashboard, badge: null },
-    { id: 'domains', title: 'Домены', icon: IconWorld, badge: '12' },
-    { id: 'asns', title: 'AS', icon: IconNetwork, badge: '8' },
-    { id: 'files', title: 'Файлы', icon: IconFileText, badge: null },
-    { id: 'cloud', title: 'Облако', icon: IconCloud, badge: null },
-    { id: 'security', title: 'Безопасность', icon: IconShield, badge: null },
-    { id: 'activity', title: 'Активность', icon: IconActivity, badge: '3' },
-    { id: 'settings', title: 'Настройки', icon: IconSettings, badge: null }
+  const navItems = [
+    { id: 'dashboard', title: 'Dashboard', icon: IconHome },
+    { id: 'domains', title: 'Домены', icon: IconWorld },
+    { id: 'asns', title: 'AS', icon: IconNetwork },
+    { id: 'files', title: 'Файлы', icon: IconFileText },
+    { id: 'cloud', title: 'Облако', icon: IconCloud },
+    { id: 'security', title: 'Безопасность', icon: IconShield },
+    { id: 'activity', title: 'Активность', icon: IconActivity },
+    { id: 'settings', title: 'Настройки', icon: IconSettings }
   ];
 
   const renderContent = () => {
@@ -70,297 +60,173 @@ function App() {
     }
   };
 
-  const getPageTitle = () => {
-    const item = sidebarItems.find(item => item.id === activeTab);
-    return item ? item.title : 'Dashboard';
-  };
-
   return (
     <div className="page">
-      {/* Sidebar */}
-      <aside className={`navbar navbar-vertical navbar-expand-lg ${sidebarOpen ? 'navbar-show' : ''}`}>
-        <div className="container-fluid">
-          <button 
-            className="navbar-toggler" 
-            type="button" 
-            onClick={toggleSidebar}
-          >
-            <IconX className="icon" />
-          </button>
-          
-          <h1 className="navbar-brand navbar-brand-autodark">
+      {/* Верхнее меню Tabler Admin */}
+      <header className="navbar navbar-expand-md navbar-light d-print-none" style={{boxShadow: '0 1px 0 0 #e9ecef'}}>
+        <div className="container-xl">
+          <a href="#" className="navbar-brand d-flex align-items-center">
             <IconBrandTabler className="navbar-brand-icon me-2" />
-            S3 Lists Manager
-          </h1>
-
-          <div className="navbar-nav flex-row d-lg-none">
-            <div className="nav-item dropdown">
-              <a href="#" className="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown">
-                <span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
-              </a>
-              <div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
-                <a href="#" className="dropdown-item">Profile</a>
-                <a href="#" className="dropdown-item">Settings</a>
-                <div className="dropdown-divider"></div>
-                <a href="#" className="dropdown-item">Logout</a>
-              </div>
-            </div>
-          </div>
-
-          <div className="collapse navbar-collapse" id="sidebar-menu">
-            <ul className="navbar-nav pt-lg-auto">
-              {sidebarItems.map((item) => (
+            <span className="fw-bold">S3 Lists Manager</span>
+          </a>
+          <div className="collapse navbar-collapse show" id="navbar-menu">
+            <ul className="navbar-nav me-auto">
+              {navItems.map((item) => (
                 <li key={item.id} className="nav-item">
                   <a 
-                    className={`nav-link ${activeTab === item.id ? 'active' : ''}`}
+                    className={`nav-link d-flex align-items-center ${activeTab === item.id ? 'active fw-bold' : ''}`}
                     href="#"
-                    onClick={(e) => { e.preventDefault(); setActiveTab(item.id); }}
+                    onClick={e => { e.preventDefault(); setActiveTab(item.id); }}
                   >
-                    <item.icon className="nav-link-icon" />
-                    <span className="nav-link-title">{item.title}</span>
-                    {item.badge && (
-                      <span className="badge badge-sm bg-green-lt text-green ms-auto">
-                        {item.badge}
-                      </span>
-                    )}
+                    <item.icon className="nav-link-icon me-1" size={20} />
+                    {item.title}
                   </a>
                 </li>
               ))}
             </ul>
-          </div>
-        </div>
-      </aside>
-
-      {/* Header */}
-      <header className="navbar navbar-expand-md navbar-light d-none d-lg-flex d-print-none">
-        <div className="container-xl">
-          <button 
-            className="navbar-toggler" 
-            type="button" 
-            onClick={toggleSidebar}
-          >
-            <IconMenu2 className="icon" />
-          </button>
-
-          <div className="navbar-nav flex-row order-md-last">
-            <div className="nav-item dropdown d-none d-md-flex me-3">
-              <a href="#" className="nav-link px-0" data-bs-toggle="dropdown" tabIndex="-1">
-                <IconBell className="icon" />
-                <span className="badge badge-sm bg-red"></span>
-              </a>
-              <div className="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
-                <div className="card">
-                  <div className="card-header">
-                    <h3 className="card-title">Уведомления</h3>
-                  </div>
-                  <div className="list-group list-group-flush">
-                    {notifications.map((notification) => (
-                      <div key={notification.id} className="list-group-item">
-                        <div className="row align-items-center">
-                          <div className="col-auto">
-                            <span className="status-dot status-dot-animated bg-red d-block"></span>
-                          </div>
-                          <div className="col text-truncate">
-                            <a href="#" className="text-body d-block">{notification.title}</a>
-                            <div className="d-block text-muted text-truncate mt-n1">
-                              {notification.message}
+            <ul className="navbar-nav ms-auto">
+              <li className="nav-item dropdown">
+                <a href="#" className="nav-link px-0" data-bs-toggle="dropdown" tabIndex="-1">
+                  <IconBell className="icon" />
+                  <span className="badge badge-sm bg-red"></span>
+                </a>
+                <div className="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                  <div className="card">
+                    <div className="card-header">
+                      <h3 className="card-title">Уведомления</h3>
+                    </div>
+                    <div className="list-group list-group-flush">
+                      {notifications.map((notification) => (
+                        <div key={notification.id} className="list-group-item">
+                          <div className="row align-items-center">
+                            <div className="col-auto">
+                              <span className="status-dot status-dot-animated bg-red d-block"></span>
+                            </div>
+                            <div className="col text-truncate">
+                              <a href="#" className="text-body d-block">{notification.title}</a>
+                              <div className="d-block text-muted text-truncate mt-n1">
+                                {notification.message}
+                              </div>
                             </div>
                           </div>
-                          <div className="col-auto">
-                            <a href="#" className="list-group-item-actions">
-                              <IconX className="icon" />
-                            </a>
-                          </div>
                         </div>
-                      </div>
-                    ))}
+                      ))}
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-
-            <div className="nav-item dropdown">
-              <a href="#" className="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown">
-                <span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
-                <span className="d-none d-xl-block ps-2">
-                  <span>Admin User</span>
-                  <IconChevronDown className="icon" />
-                </span>
-              </a>
-              <div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
-                <a href="#" className="dropdown-item">
-                  <IconUser className="icon me-2" />
-                  Profile
+              </li>
+              <li className="nav-item dropdown ms-3">
+                <a href="#" className="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown">
+                  <span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
+                  <span className="d-none d-xl-block ps-2">
+                    <span>Admin User</span>
+                    <IconChevronDown className="icon" />
+                  </span>
                 </a>
-                <a href="#" className="dropdown-item">
-                  <IconSettings className="icon me-2" />
-                  Settings
-                </a>
-                <div className="dropdown-divider"></div>
-                <a href="#" className="dropdown-item">
-                  <IconLogout className="icon me-2" />
-                  Logout
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div className="navbar-nav flex-row">
-            <div className="nav-item d-none d-md-flex me-3">
-              <div className="input-icon">
-                <IconSearch className="icon" />
-                <input type="text" className="form-control" placeholder="Поиск..." />
-              </div>
-            </div>
+                <div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                  <a href="#" className="dropdown-item">
+                    <IconUser className="icon me-2" />
+                    Профиль
+                  </a>
+                  <a href="#" className="dropdown-item">
+                    <IconSettings className="icon me-2" />
+                    Настройки
+                  </a>
+                  <div className="dropdown-divider"></div>
+                  <a href="#" className="dropdown-item">
+                    Выйти
+                  </a>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </header>
-
-      {/* Main Content */}
-      <div className="page-wrapper">
-        <div className="container-xl">
-          {/* Page Header */}
-          <div className="page-header d-print-none">
-            <div className="row align-items-center">
-              <div className="col">
-                <div className="page-pretitle">
-                  S3 Lists Manager
-                </div>
-                <h2 className="page-title">
-                  {getPageTitle()}
-                </h2>
-              </div>
-              <div className="col-auto ms-auto d-print-none">
-                <div className="btn-list">
-                  <span className="d-none d-sm-inline">
-                    <a href="#" className="btn btn-white">
-                      Новый домен
-                    </a>
-                  </span>
-                  <a href="#" className="btn btn-primary d-none d-sm-inline-block">
-                    <IconDatabase className="icon me-2" />
-                    Сохранить в S3
-                  </a>
-                </div>
-              </div>
-            </div>
-            {/* Breadcrumbs */}
-            <div className="page-header-breadcrumb">
-              <ol className="breadcrumb">
-                <li className="breadcrumb-item">
-                  <a href="#" onClick={(e) => { e.preventDefault(); setActiveTab('dashboard'); }}>
-                    <IconHome className="icon me-2" />
-                    Главная
-                  </a>
-                </li>
-                <li className="breadcrumb-item active" aria-current="page">
-                  {getPageTitle()}
-                </li>
-              </ol>
-            </div>
-          </div>
+      <main className="page-wrapper">
+        <div className="container-xl mt-4">
+          {renderContent()}
         </div>
-
-        <div className="page-body">
-          <div className="container-xl">
-            {renderContent()}
-          </div>
-        </div>
-
-        {/* Footer */}
-        <footer className="footer footer-transparent d-print-none">
-          <div className="container-xl">
-            <div className="row text-center align-items-center flex-row-reverse">
-              <div className="col-12 col-lg-auto mt-3 mt-lg-0">
-                <ul className="list-inline list-inline-dots mb-0">
-                  <li className="list-inline-item">
-                    Copyright &copy; 2024
-                    <a href="." className="link-secondary">S3 Lists Manager</a>.
-                    All rights reserved.
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
+      </main>
     </div>
   );
 }
 
-// Dashboard Component
 function Dashboard() {
-  const stats = [
-    { title: 'Всего доменов', value: '1,234', icon: IconWorld, color: 'blue' },
-    { title: 'Всего AS', value: '567', icon: IconNetwork, color: 'green' },
-    { title: 'Активные шлюзы', value: '12', icon: IconDatabase, color: 'orange' },
-    { title: 'Последние изменения', value: '3', icon: IconActivity, color: 'red' }
-  ];
-
   return (
-    <div className="row row-deck row-cards">
-      {/* Stats Cards */}
-      {stats.map((stat, index) => (
-        <div key={index} className="col-sm-6 col-lg-3">
+    <div>
+      <div className="page-header d-print-none mb-4">
+        <div className="row align-items-center">
+          <div className="col">
+            <h2 className="page-title">Dashboard</h2>
+            <div className="page-pretitle">Главная / Dashboard</div>
+          </div>
+        </div>
+      </div>
+      <div className="row row-deck">
+        <div className="col-sm-6 col-lg-3">
           <div className="card">
             <div className="card-body">
+              <div className="h1 mb-3">1,234</div>
               <div className="d-flex align-items-center">
-                <div className="subheader">{stat.title}</div>
-              </div>
-              <div className="h1 mb-3">{stat.value}</div>
-              <div className="d-flex mb-2">
-                <stat.icon className={`icon icon-sm text-${stat.color}`} />
+                <IconWorld className="icon me-2" />
+                <span className="text-muted">Всего доменов</span>
               </div>
             </div>
           </div>
         </div>
-      ))}
-
-      {/* Main Content Card */}
-      <div className="col-12">
-        <div className="card">
-          <div className="card-header">
-            <h3 className="card-title">Добро пожаловать в S3 Lists Manager</h3>
+        <div className="col-sm-6 col-lg-3">
+          <div className="card">
+            <div className="card-body">
+              <div className="h1 mb-3">567</div>
+              <div className="d-flex align-items-center">
+                <IconNetwork className="icon me-2" />
+                <span className="text-muted">Всего AS</span>
+              </div>
+            </div>
           </div>
-          <div className="card-body">
-            <p>Выберите раздел в боковом меню для управления списками доменов и AS.</p>
-            <div className="row">
-              <div className="col-md-6">
-                <div className="card card-sm">
-                  <div className="card-body">
-                    <div className="row align-items-center">
-                      <div className="col-auto">
-                        <IconWorld className="icon icon-lg text-blue" />
-                      </div>
-                      <div className="col">
-                        <div className="font-weight-medium">
-                          Управление доменами
-                        </div>
-                        <div className="text-muted">
-                          Добавляйте, редактируйте и управляйте списками доменов
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+        </div>
+        <div className="col-sm-6 col-lg-3">
+          <div className="card">
+            <div className="card-body">
+              <div className="h1 mb-3">12</div>
+              <div className="d-flex align-items-center">
+                <IconCloud className="icon me-2" />
+                <span className="text-muted">Активные шлюзы</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-sm-6 col-lg-3">
+          <div className="card">
+            <div className="card-body">
+              <div className="h1 mb-3">3</div>
+              <div className="d-flex align-items-center">
+                <IconActivity className="icon me-2" />
+                <span className="text-muted">Последние изменения</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="card mt-4">
+        <div className="card-body">
+          <h3 className="card-title mb-3">Добро пожаловать в S3 Lists Manager</h3>
+          <div className="row">
+            <div className="col-md-6 mb-3">
+              <div className="d-flex align-items-center">
+                <IconWorld className="icon me-2" size={32} />
+                <div>
+                  <div className="fw-bold">Управление доменами</div>
+                  <div className="text-muted">Добавляйте, редактируйте и управляйте списками доменов</div>
                 </div>
               </div>
-              <div className="col-md-6">
-                <div className="card card-sm">
-                  <div className="card-body">
-                    <div className="row align-items-center">
-                      <div className="col-auto">
-                        <IconNetwork className="icon icon-lg text-green" />
-                      </div>
-                      <div className="col">
-                        <div className="font-weight-medium">
-                          Управление AS
-                        </div>
-                        <div className="text-muted">
-                          Добавляйте, редактируйте и управляйте списками AS
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+            </div>
+            <div className="col-md-6 mb-3">
+              <div className="d-flex align-items-center">
+                <IconNetwork className="icon me-2" size={32} />
+                <div>
+                  <div className="fw-bold">Управление AS</div>
+                  <div className="text-muted">Добавляйте, редактируйте и управляйте списками AS</div>
                 </div>
               </div>
             </div>