feat: add layout

2026-04-04 03:07:45 +03:00
parent 691e1fced5
commit 57b43da2e3
7 changed files with 499 additions and 89 deletions
@@ -0,0 +1,116 @@
+import { useNavigate, useLocation } from "react-router-dom";
+import { FaHome, FaServer, FaPalette, FaUser } from "react-icons/fa";
+import { useAuthStore } from "@/modules/auth/store/useAuthStore";
+
+export const Navigation = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, logout } = useAuthStore();
+
+  const navItems = [
+    { path: "/", label: "Главная", icon: FaHome },
+    { path: "/add-agents", label: "Агенты", icon: FaServer },
+    { path: "/themes", label: "Темы", icon: FaPalette },
+  ];
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <div
+      className="flex-shrink-0 border-b"
+      style={{
+        backgroundColor: "var(--card-bg)",
+        borderColor: "var(--border)",
+      }}
+    >
+      <div className="flex items-center justify-between px-4 py-2.5">
+        {/* Логотип */}
+        <div
+          className="flex items-center gap-2 cursor-pointer"
+          onClick={() => navigate("/")}
+        >
+          <FaServer style={{ color: "var(--accent)", fontSize: "18px" }} />
+          <span
+            className="text-sm font-semibold"
+            style={{ color: "var(--text-primary)" }}
+          >
+            HellreigN
+          </span>
+        </div>
+
+        {/* Навигация */}
+        <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>
+            );
+          })}
+        </div>
+
+        {/* Профиль пользователя */}
+        <div className="flex items-center gap-2">
+          {user && (
+            <div className="flex items-center gap-2">
+              <div
+                className="w-8 h-8 rounded-full flex items-center justify-center"
+                style={{ backgroundColor: "var(--bg-secondary)" }}
+              >
+                <FaUser size={12} style={{ color: "var(--accent)" }} />
+              </div>
+              <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
+                {user.name}
+              </span>
+            </div>
+          )}
+          <button
+            onClick={() => {
+              logout();
+              navigate("/auth");
+            }}
+            className="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+            style={{
+              backgroundColor: "var(--error-bg)",
+              color: "var(--error-text)",
+              border: "1px solid var(--error-border)",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "var(--error-text)";
+              e.currentTarget.style.color = "#fff";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "var(--error-bg)";
+              e.currentTarget.style.color = "var(--error-text)";
+            }}
+          >
+            Выйти
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};