feat: Revamp navigation structure in App component with dropdown menus and enhanced styling for improved user experience

frontend/src/App.jsx

@@ -19,7 +19,12 @@ import {
   IconServer,
   IconFilter,
   IconDownload,
-  IconCreditCard
+  IconCreditCard,
+  IconMoon,
+  IconGrid,
+  IconHeart,
+  IconCode,
+  IconGear
 } from '@tabler/icons-react';
 import DataManager from './DataManager';
 import ServerManager from './ServerManager';
@@ -55,46 +60,202 @@ function MainLayout() {
     { id: 2, title: 'Изменения сохранены', message: 'Список AS обновлен в S3', time: '5 мин назад' }
   ]);
 
-  const navItems = [
-    { id: 'domains', title: 'Домены', icon: IconWorld, path: '/domains' },
-    { id: 'domains-new', title: 'Домены New', icon: IconWorld, path: '/domains-new' },
-    { id: 'ip-ranges', title: 'IP-диапазоны', icon: IconNetwork, path: '/ip-ranges' },
-    { id: 'asns', title: 'AS', icon: IconNetwork, path: '/asns' },
-    { id: 'auto-urls', title: 'Авто URL', icon: IconDownload, path: '/auto-urls' },
-    { id: 'servers', title: 'Серверы', icon: IconServer, path: '/servers' },
-    { id: 'billing', title: 'Биллинг', icon: IconCreditCard, path: '/billing' },
-    { id: 'filters', title: 'Фильтры', icon: IconFilter, path: '/filters' },
-    { id: 'files', title: 'Файлы', icon: IconFileText, path: '/files' },
-    { id: 'cloud', title: 'Облако', icon: IconCloud, path: '/cloud' },
-    { id: 'security', title: 'Безопасность', icon: IconShield, path: '/security' },
-    { id: 'activity', title: 'Активность', icon: IconActivity, path: '/activity' },
-    { id: 'settings', title: 'Настройки', icon: IconSettings, path: '/settings' }
+  // Состояние для управления выпадающими меню
+  const [dropdownStates, setDropdownStates] = useState({
+    data: false,
+    management: false,
+    tools: false,
+    settings: false
+  });
+
+  const toggleDropdown = (dropdown) => {
+    setDropdownStates(prev => ({
+      ...prev,
+      [dropdown]: !prev[dropdown]
+    }));
+  };
+
+  const navCategories = [
+    {
+      id: 'home',
+      title: 'Главная',
+      icon: IconHome,
+      path: '/',
+      single: true
+    },
+    {
+      id: 'data',
+      title: 'Данные',
+      icon: IconDatabase,
+      items: [
+        { id: 'domains', title: 'Домены', path: '/domains', icon: IconWorld },
+        { id: 'domains-new', title: 'Домены New', path: '/domains-new', icon: IconWorld },
+        { id: 'ip-ranges', title: 'IP-диапазоны', path: '/ip-ranges', icon: IconNetwork },
+        { id: 'asns', title: 'AS', path: '/asns', icon: IconNetwork }
+      ]
+    },
+    {
+      id: 'management',
+      title: 'Управление',
+      icon: IconServer,
+      items: [
+        { id: 'servers', title: 'Серверы', path: '/servers', icon: IconServer },
+        { id: 'filters', title: 'Фильтры', path: '/filters', icon: IconFilter },
+        { id: 'billing', title: 'Биллинг', path: '/billing', icon: IconCreditCard }
+      ]
+    },
+    {
+      id: 'tools',
+      title: 'Инструменты',
+      icon: IconSettings,
+      items: [
+        { id: 'auto-urls', title: 'Авто URL', path: '/auto-urls', icon: IconDownload },
+        { id: 'files', title: 'Файлы', path: '/files', icon: IconFileText },
+        { id: 'cloud', title: 'Облако', path: '/cloud', icon: IconCloud },
+        { id: 'security', title: 'Безопасность', path: '/security', icon: IconShield },
+        { id: 'activity', title: 'Активность', path: '/activity', icon: IconActivity }
+      ]
+    },
+    {
+      id: 'settings',
+      title: 'Настройки',
+      icon: IconSettings,
+      path: '/settings',
+      single: true
+    }
   ];
 
   // Определяем активную вкладку по адресу
-  const activeTab = navItems.find(item => location.pathname.startsWith(item.path))?.id || 'domains';
+  const getActiveTab = () => {
+    for (const category of navCategories) {
+      if (category.single && location.pathname === category.path) {
+        return category.id;
+      }
+      if (category.items) {
+        for (const item of category.items) {
+          if (location.pathname.startsWith(item.path)) {
+            return item.id;
+          }
+        }
+      }
+    }
+    return 'home';
+  };
+
+  const activeTab = getActiveTab();
 
   return (
     <div className="page">
       {/* Верхнее меню Tabler Admin */}
       <header className="navbar navbar-expand-md navbar-light d-print-none" style={{boxShadow: '0 1px 0 0 #e9ecef'}}>
-        <div className="container-xl d-flex align-items-center justify-content-between">
-          <Link to="/" className="navbar-brand d-flex align-items-center">
-            <IconBrandTabler className="navbar-brand-icon me-2" />
-            <span className="fw-bold">S3 Lists Manager</span>
-          </Link>
-          <nav className="nav nav-tabs ms-4">
-            {navItems.map(item => (
-              <Link
-                key={item.id}
-                to={item.path}
-                className={`nav-link${activeTab === item.id ? ' active fw-bold' : ''}`}
-                style={{display: 'flex', alignItems: 'center'}}>
-                <item.icon className="me-2" />
-                {item.title}
-              </Link>
-            ))}
-          </nav>
+        <div className="container-xl">
+          {/* Логотип */}
+          <div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <Link to="/" className="navbar-brand d-flex align-items-center">
+              <IconBrandTabler className="navbar-brand-icon me-2" />
+              <span className="fw-bold">S3 Lists Manager</span>
+            </Link>
+          </div>
+          
+          {/* Основное меню */}
+          <div className="collapse navbar-collapse" id="navbar-menu">
+            <div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
+              <ul className="navbar-nav">
+                {navCategories.map(category => (
+                  <li key={category.id} className="nav-item dropdown">
+                    {category.single ? (
+                      <Link
+                        to={category.path}
+                        className={`nav-link${activeTab === category.id ? ' active' : ''}`}
+                      >
+                        <category.icon className="icon icon-tabler" />
+                        <span className="nav-link-title">{category.title}</span>
+                      </Link>
+                    ) : (
+                      <>
+                        <a 
+                          className={`nav-link dropdown-toggle${activeTab.startsWith(category.id) ? ' active' : ''}`}
+                          href="#"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            toggleDropdown(category.id);
+                          }}
+                        >
+                          <category.icon className="icon icon-tabler" />
+                          <span className="nav-link-title">{category.title}</span>
+                        </a>
+                        {dropdownStates[category.id] && (
+                          <div className="dropdown-menu show">
+                            <div className="dropdown-menu-columns">
+                              <div className="dropdown-menu-column">
+                                {category.items.map(item => (
+                                  <Link
+                                    key={item.id}
+                                    to={item.path}
+                                    className={`dropdown-item${activeTab === item.id ? ' active' : ''}`}
+                                  >
+                                    <item.icon className="icon icon-tabler" />
+                                    {item.title}
+                                  </Link>
+                                ))}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+          
+          {/* Правая часть навбара */}
+          <div className="navbar-nav flex-row order-md-last">
+            {/* Иконки */}
+            <div className="nav-item dropdown">
+              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Source code">
+                <IconCode className="icon icon-tabler" />
+              </a>
+            </div>
+            <div className="nav-item dropdown">
+              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Sponsor">
+                <IconHeart className="icon icon-tabler" />
+              </a>
+            </div>
+            <div className="nav-item dropdown">
+              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Dark mode">
+                <IconMoon className="icon icon-tabler" />
+              </a>
+            </div>
+            <div className="nav-item dropdown">
+              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Notifications">
+                <IconBell className="icon icon-tabler" />
+              </a>
+            </div>
+            <div className="nav-item dropdown">
+              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Apps">
+                <IconGrid className="icon icon-tabler" />
+              </a>
+            </div>
+            <div className="nav-item dropdown">
+              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Theme settings">
+                <IconGear className="icon icon-tabler" />
+                <span className="badge bg-red"></span>
+              </a>
+            </div>
+            
+            {/* Пользователь */}
+            <div className="nav-item dropdown">
+              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="User menu">
+                <span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
+                <div className="d-none d-xl-block ps-2">
+                  <div>Admin User</div>
+                  <div className="mt-1 small text-muted">Administrator</div>
+                </div>
+              </a>
+            </div>
+          </div>
         </div>
       </header>
       <div className="container-xl mt-4">