69 lines
1.8 KiB
TypeScript
Executable File
69 lines
1.8 KiB
TypeScript
Executable File
import type { FC, MouseEvent } from 'react';
|
|
import React, { useContext } from 'react';
|
|
import { context, Link, NavLink } from 'dumi/theme';
|
|
import LocaleSelect from './LocaleSelect';
|
|
import './Navbar.less';
|
|
|
|
interface INavbarProps {
|
|
location: any;
|
|
navPrefix?: React.ReactNode;
|
|
onMobileMenuClick: (ev: MouseEvent<HTMLButtonElement>) => void;
|
|
}
|
|
|
|
const Navbar: FC<INavbarProps> = ({ onMobileMenuClick, navPrefix, location }) => {
|
|
const {
|
|
base,
|
|
config: { mode, title, logo },
|
|
nav: navItems,
|
|
} = useContext(context);
|
|
|
|
return (
|
|
<div className="__dumi-default-navbar" data-mode={mode}>
|
|
{/* menu toogle button (only for mobile) */}
|
|
<button className="__dumi-default-navbar-toggle" onClick={onMobileMenuClick} />
|
|
{/* logo & title */}
|
|
<Link
|
|
className="__dumi-default-navbar-logo"
|
|
style={{
|
|
backgroundImage: logo && `url('${logo}')`,
|
|
}}
|
|
to={base}
|
|
data-plaintext={logo === false || undefined}
|
|
>
|
|
{/* {title} */}
|
|
</Link>
|
|
<nav>
|
|
{navPrefix}
|
|
{/* nav */}
|
|
{navItems.map(nav => {
|
|
const child = Boolean(nav.children?.length) && (
|
|
<ul>
|
|
{nav.children.map(item => (
|
|
<li key={item.path}>
|
|
<NavLink to={item.path}>{item.title}</NavLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
|
|
return (
|
|
<span key={nav.title || nav.path}>
|
|
{nav.path ? (
|
|
<NavLink to={nav.path} key={nav.path}>
|
|
{nav.title}
|
|
</NavLink>
|
|
) : (
|
|
nav.title
|
|
)}
|
|
{child}
|
|
</span>
|
|
);
|
|
})}
|
|
<LocaleSelect location={location} />
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|