66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import styles from "../styles/navigation.module.css";
|
|
import Cookies from "js-cookie";
|
|
import { useEffect, useState } from "react";
|
|
import { useUser } from "./UserContext";
|
|
import TabsNav from "./TabsNav";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface NavItem {
|
|
id: string;
|
|
label: string;
|
|
href: string;
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{ id: "home", label: "Дашборд", href: "/" },
|
|
{ id: "stat", label: "Статистика", href: "/stat" },
|
|
{ id: "billing", label: "Финансы", href: "/billing" },
|
|
{ id: "category", label: "Категории товаров", href: "/category" },
|
|
];
|
|
|
|
const Navigation: React.FC = () => {
|
|
const pathname = usePathname();
|
|
const [login, setLogin] = useState<string>("");
|
|
const { firstName, surname } = useUser();
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
if (typeof document !== "undefined") {
|
|
const userLogin = Cookies.get('user_login');
|
|
if (userLogin) setLogin(userLogin);
|
|
}
|
|
}, []);
|
|
|
|
const handleNavigationChange = (tabId: string) => {
|
|
if (tabId === "home") {
|
|
router.push("/");
|
|
} else if (tabId === "stat") {
|
|
router.push("/stat");
|
|
} else if (tabId === "billing") {
|
|
router.push("/billing");
|
|
}
|
|
};
|
|
|
|
if (pathname === "/auth") return null;
|
|
return (
|
|
<nav className={styles.nav}>
|
|
<div className={styles.logo}>RE:Premium Partner</div>
|
|
<TabsNav activeTab={pathname} setActiveTab={handleNavigationChange} tabs={navItems} />
|
|
<div className={styles.profile}>
|
|
<Link href="/account" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
|
|
<div className={styles.avatar}>
|
|
{firstName && surname ? `${firstName[0]}${surname[0]}`.toUpperCase() : (login ? login.slice(0, 2).toUpperCase() : "ПП")}
|
|
</div>
|
|
<span className={styles.profileName}>
|
|
{firstName && surname ? `${firstName} ${surname}` : (login ? login : "Партнер RE:Premium")}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|