雨霖铃
62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { NavLink, useLocation } from 'react-router-dom';
|
|
import { ReactNode } from 'react';
|
|
import {
|
|
AppBar,
|
|
Tab,
|
|
Tabs,
|
|
Toolbar,
|
|
} from '@mui/material';
|
|
|
|
interface RouteItem {
|
|
path: string;
|
|
label: string;
|
|
element: ReactNode;
|
|
}
|
|
|
|
interface NavbarProps {
|
|
items?: RouteItem[];
|
|
}
|
|
|
|
function Navbar({ items = [] }: NavbarProps) {
|
|
const location = useLocation();
|
|
|
|
// Chrome 扩展 popup 固定尺寸，全部显示在滚动标签中
|
|
// 精确匹配路由
|
|
const activeTabIndex = items.findIndex((item) => location.pathname === item.path);
|
|
|
|
return (
|
|
<AppBar
|
|
position="static"
|
|
color="default"
|
|
elevation={0}
|
|
sx={{ backgroundColor: 'transparent', borderBottom: 1, borderColor: 'divider' }}
|
|
>
|
|
<Toolbar sx={{ justifyContent: 'center', position: 'relative' }}>
|
|
<Tabs
|
|
value={activeTabIndex === -1 ? 0 : activeTabIndex}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
allowScrollButtonsMobile
|
|
aria-label="navigation tabs"
|
|
sx={{ minHeight: 48 }}
|
|
>
|
|
{items.map((item) => (
|
|
<Tab
|
|
key={item.path}
|
|
label={item.label}
|
|
component={NavLink}
|
|
to={item.path}
|
|
sx={{
|
|
minWidth: 80,
|
|
fontSize: '0.875rem',
|
|
}}
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|