37 lines
895 B
TypeScript
37 lines
895 B
TypeScript
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
export type NavHeaderConfig = {
|
||
|
|
title: string
|
||
|
|
subtitle?: string
|
||
|
|
icon?: string | {
|
||
|
|
href: string
|
||
|
|
alt?: string
|
||
|
|
size?: number
|
||
|
|
width?: number
|
||
|
|
height?: number
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export function NavHeader({config, onToggleFold}: {
|
||
|
|
config: NavHeaderConfig
|
||
|
|
onToggleFold?: ()=>void
|
||
|
|
}) {
|
||
|
|
const {title, subtitle, icon: icon0} = config;
|
||
|
|
const icon = typeof icon0 === 'string' ? {href: icon0} : icon0;
|
||
|
|
return <header>
|
||
|
|
<Link href="/" id="icon-link">
|
||
|
|
{icon?.href && <img className="icon"
|
||
|
|
src={icon?.href}
|
||
|
|
alt={icon?.alt ?? 'icon'}
|
||
|
|
width={icon?.width ?? icon?.size ?? 96}
|
||
|
|
height={icon?.height ?? icon?.size ?? 96}
|
||
|
|
/>}
|
||
|
|
<div className="icon-text">
|
||
|
|
<div>{title}</div>
|
||
|
|
<div>{subtitle}</div>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<div className="menu-toggle" onClick={onToggleFold} />
|
||
|
|
</header>;
|
||
|
|
}
|