@@ -1,5 +1,12 @@
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { FaHome, FaServer, FaPalette, FaUser } from "react-icons/fa";
|
||||
import {
|
||||
FaHome,
|
||||
FaServer,
|
||||
FaPalette,
|
||||
FaUser,
|
||||
FaUsers,
|
||||
FaRocket,
|
||||
} from "react-icons/fa";
|
||||
import { useAuthStore } from "@/modules/auth/store/useAuthStore";
|
||||
|
||||
export const Navigation = () => {
|
||||
@@ -9,7 +16,8 @@ export const Navigation = () => {
|
||||
|
||||
const navItems = [
|
||||
{ path: "/", label: "Главная", icon: FaHome },
|
||||
{ path: "/add-agents", label: "Агенты", icon: FaServer },
|
||||
{ path: "/add-agents", label: "Деплой", icon: FaRocket },
|
||||
{ path: "/admin", label: "Админка", icon: FaUsers, adminOnly: true },
|
||||
{ path: "/themes", label: "Темы", icon: FaPalette },
|
||||
];
|
||||
|
||||
@@ -40,36 +48,44 @@ export const Navigation = () => {
|
||||
|
||||
{/* Навигация */}
|
||||
<div className="flex items-center gap-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
return (
|
||||
<button
|
||||
key={item.path}
|
||||
onClick={() => navigate(item.path)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all"
|
||||
style={{
|
||||
backgroundColor: active ? "var(--accent)" : "transparent",
|
||||
color: active ? "var(--accent-text)" : "var(--text-secondary)",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!active) {
|
||||
e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
|
||||
e.currentTarget.style.color = "var(--text-primary)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!active) {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
e.currentTarget.style.color = "var(--text-secondary)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon size={12} />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{navItems
|
||||
.filter((item) => {
|
||||
if (item.adminOnly && !user?.permission_admin) return false;
|
||||
return true;
|
||||
})
|
||||
.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
return (
|
||||
<button
|
||||
key={item.path}
|
||||
onClick={() => navigate(item.path)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all"
|
||||
style={{
|
||||
backgroundColor: active ? "var(--accent)" : "transparent",
|
||||
color: active
|
||||
? "var(--accent-text)"
|
||||
: "var(--text-secondary)",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!active) {
|
||||
e.currentTarget.style.backgroundColor =
|
||||
"var(--bg-secondary)";
|
||||
e.currentTarget.style.color = "var(--text-primary)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!active) {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
e.currentTarget.style.color = "var(--text-secondary)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon size={12} />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Профиль пользователя */}
|
||||
@@ -82,7 +98,10 @@ export const Navigation = () => {
|
||||
>
|
||||
<FaUser size={12} style={{ color: "var(--accent)" }} />
|
||||
</div>
|
||||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||||
<span
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{user.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user