Foster Hangdaan
f04758c971
The `nav_icon` page data specifies which icon will be displayed in the nav entry.
35 lines
963 B
TypeScript
35 lines
963 B
TypeScript
export default function({ nav }) {
|
|
const defaultIcon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/question-mark.svg";
|
|
|
|
const iconStyle = {
|
|
filter: "var(--filter-blue)",
|
|
};
|
|
|
|
return (
|
|
<nav className="navbar">
|
|
<ul className="navbar-list">
|
|
<li className="navbar-list-item home">
|
|
<a href="/">
|
|
<img
|
|
src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/home.svg"
|
|
className="icon"
|
|
style={iconStyle}
|
|
/>
|
|
</a>
|
|
</li>
|
|
{nav.menu().children.map(navItem => (
|
|
<li className="navbar-list-item">
|
|
<a href={`/${navItem.slug}`} title={navItem.data.title}>
|
|
<img
|
|
src={navItem.data.nav_icon || defaultIcon}
|
|
className="icon"
|
|
style={iconStyle}
|
|
/>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|