40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
|
|
const Navigation: React.FC = () => {
|
|
const location = useLocation();
|
|
|
|
const navigationItems = [
|
|
{ path: "/", label: "Home", name: "首页" },
|
|
{ path: "/spatial-clustering", label: "Spatial clustering", name: "空间聚类" },
|
|
{ path: "/gene-view", label: "Gene Expression", name: "基因表达" },
|
|
{ path: "/temporal-analysis", label: "Temporal Analysis", name: "时间序列分析" },
|
|
{ path: "/resource", label: "Resource", name: "资源" },
|
|
{ path: "/download", label: "Download", name: "下载" },
|
|
];
|
|
|
|
return (
|
|
<nav className="main-navigation">
|
|
<div className="nav-container">
|
|
<div className="nav-brand">
|
|
<Link to="/" className="nav-brand-link">
|
|
<span className="nav-brand-text">Digital Embryo</span>
|
|
</Link>
|
|
</div>
|
|
<div className="nav-links">
|
|
{navigationItems.map((item) => (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|