feat: Simplify MainLayout by removing unused icons and notifications, streamlining the navbar for a cleaner user interface
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m57s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m57s
This commit is contained in:
+14
-74
@@ -6,23 +6,11 @@ import {
|
|||||||
IconNetwork,
|
IconNetwork,
|
||||||
IconSettings,
|
IconSettings,
|
||||||
IconHome,
|
IconHome,
|
||||||
IconFileText,
|
|
||||||
IconCloud,
|
|
||||||
IconShield,
|
|
||||||
IconActivity,
|
|
||||||
IconBell,
|
|
||||||
IconChevronDown,
|
|
||||||
IconUser,
|
|
||||||
IconDatabase,
|
IconDatabase,
|
||||||
IconAlertTriangle,
|
|
||||||
IconAlertCircle,
|
|
||||||
IconServer,
|
IconServer,
|
||||||
IconFilter,
|
IconFilter,
|
||||||
IconDownload,
|
IconDownload,
|
||||||
IconCreditCard,
|
IconCreditCard
|
||||||
IconMoon,
|
|
||||||
IconHeart,
|
|
||||||
IconCode
|
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import ServerManager from './ServerManager';
|
import ServerManager from './ServerManager';
|
||||||
import FilterManager from './FilterManager';
|
import FilterManager from './FilterManager';
|
||||||
@@ -53,17 +41,13 @@ function App() {
|
|||||||
|
|
||||||
function MainLayout() {
|
function MainLayout() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [notifications] = useState([
|
// Навбар стал лаконичным: без неиспользуемых уведомлений/иконок
|
||||||
{ id: 1, title: 'Новый домен добавлен', message: 'example.com был добавлен в список', time: '2 мин назад' },
|
|
||||||
{ id: 2, title: 'Изменения сохранены', message: 'Список AS обновлен в S3', time: '5 мин назад' }
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Состояние для управления выпадающими меню
|
// Состояние для управления выпадающими меню
|
||||||
const [dropdownStates, setDropdownStates] = useState({
|
const [dropdownStates, setDropdownStates] = useState({
|
||||||
data: false,
|
data: false,
|
||||||
management: false,
|
management: false,
|
||||||
tools: false,
|
tools: false
|
||||||
settings: false
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Закрытие всех выпадающих меню при клике вне их области
|
// Закрытие всех выпадающих меню при клике вне их области
|
||||||
@@ -73,8 +57,7 @@ function MainLayout() {
|
|||||||
setDropdownStates({
|
setDropdownStates({
|
||||||
data: false,
|
data: false,
|
||||||
management: false,
|
management: false,
|
||||||
tools: false,
|
tools: false
|
||||||
settings: false
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -91,8 +74,7 @@ function MainLayout() {
|
|||||||
const newState = {
|
const newState = {
|
||||||
data: false,
|
data: false,
|
||||||
management: false,
|
management: false,
|
||||||
tools: false,
|
tools: false
|
||||||
settings: false
|
|
||||||
};
|
};
|
||||||
// Открываем только выбранное меню, если оно было закрыто
|
// Открываем только выбранное меню, если оно было закрыто
|
||||||
if (!prev[dropdown]) {
|
if (!prev[dropdown]) {
|
||||||
@@ -138,13 +120,7 @@ function MainLayout() {
|
|||||||
{ id: 'auto-urls', title: 'Авто URL', path: '/auto-urls', icon: IconDownload }
|
{ id: 'auto-urls', title: 'Авто URL', path: '/auto-urls', icon: IconDownload }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
// Убрали неиспользуемые/неработающие разделы
|
||||||
id: 'settings',
|
|
||||||
title: 'Настройки',
|
|
||||||
icon: IconSettings,
|
|
||||||
path: '/settings',
|
|
||||||
single: true
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
// Определяем активную вкладку по адресу
|
// Определяем активную вкладку по адресу
|
||||||
@@ -233,50 +209,14 @@ function MainLayout() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Правая часть навбара */}
|
{/* Правая часть навбара (минимальная) */}
|
||||||
<div className="navbar-nav flex-row order-md-last">
|
<div className="navbar-nav order-md-last">
|
||||||
{/* Иконки */}
|
<div className="nav-item d-flex align-items-center">
|
||||||
<div className="nav-item dropdown">
|
<span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
|
||||||
<a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Source code">
|
<div className="d-none d-xl-block ps-2">
|
||||||
<IconCode className="icon icon-tabler" />
|
<div>Admin User</div>
|
||||||
</a>
|
<div className="mt-1 small text-muted">Administrator</div>
|
||||||
</div>
|
</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">
|
|
||||||
<IconActivity 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">
|
|
||||||
<IconSettings 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user