From 7e29a3daed3773ba9a57d5353ce708d6fd6a50d0 Mon Sep 17 00:00:00 2001 From: Denis Shatskiy Date: Wed, 9 Jul 2025 09:26:42 +0700 Subject: [PATCH] refactor: Simplify App component by removing sidebar functionality and updating navigation structure for improved UI consistency --- frontend/src/App.jsx | 422 +++++++++++++++---------------------------- 1 file changed, 144 insertions(+), 278 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index c210dad..7d79e04 100644 --- a/frontend/src/App.jsx +++ b/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 (
- {/* Sidebar */} - - - {/* Header */} -
-
- - -
-
- - - - -
-
-
-

Уведомления

-
-
- {notifications.map((notification) => ( -
-
-
- -
-
- {notification.title} -
- {notification.message} +
    +
  • + + + + +
    +
    +
    +

    Уведомления

    +
    +
    + {notifications.map((notification) => ( +
    +
    +
    + +
    +
    + {notification.title} +
    + {notification.message} +
    -
    - - - -
    -
    - ))} + ))} +
-
-
- - -
- -
- - {/* Main Content */} -
-
- {/* Page Header */} -
-
-
-
- S3 Lists Manager -
-

- {getPageTitle()} -

-
- -
- {/* Breadcrumbs */} - -
+
+
+ {renderContent()}
- -
-
- {renderContent()} -
-
- - {/* Footer */} -
-
-
-
- -
-
-
-
-
+
); } -// 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 ( -
- {/* Stats Cards */} - {stats.map((stat, index) => ( -
+
+
+
+
+

Dashboard

+
Главная / Dashboard
+
+
+
+
+
+
1,234
-
{stat.title}
-
-
{stat.value}
-
- + + Всего доменов
- ))} - - {/* Main Content Card */} -
-
-
-

Добро пожаловать в S3 Lists Manager

+
+
+
+
567
+
+ + Всего AS +
+
-
-

Выберите раздел в боковом меню для управления списками доменов и AS.

-
-
-
-
-
-
- -
-
-
- Управление доменами -
-
- Добавляйте, редактируйте и управляйте списками доменов -
-
-
-
+
+
+
+
+
12
+
+ + Активные шлюзы +
+
+
+
+
+
+
+
3
+
+ + Последние изменения +
+
+
+
+
+
+
+

Добро пожаловать в S3 Lists Manager

+
+
+
+ +
+
Управление доменами
+
Добавляйте, редактируйте и управляйте списками доменов
-
-
-
-
-
- -
-
-
- Управление AS -
-
- Добавляйте, редактируйте и управляйте списками AS -
-
-
-
+
+
+
+ +
+
Управление AS
+
Добавляйте, редактируйте и управляйте списками AS