Generate navigation items using the nav plugin

The `nav_icon` page data specifies which icon will be displayed in
the nav entry.
This commit is contained in:
Foster Hangdaan 2023-08-04 22:00:39 -04:00
parent a2980f4a0a
commit f04758c971
Signed by: foster
GPG key ID: E48D7F49A852F112
3 changed files with 16 additions and 19 deletions

View file

@ -1,4 +1,6 @@
export default function() { export default function({ nav }) {
const defaultIcon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/question-mark.svg";
const iconStyle = { const iconStyle = {
filter: "var(--filter-blue)", filter: "var(--filter-blue)",
}; };
@ -15,24 +17,17 @@ export default function() {
/> />
</a> </a>
</li> </li>
<li className="navbar-list-item"> {nav.menu().children.map(navItem => (
<a href="/gpg-key" title="GPG Key"> <li className="navbar-list-item">
<img <a href={`/${navItem.slug}`} title={navItem.data.title}>
src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg" <img
className="icon" src={navItem.data.nav_icon || defaultIcon}
style={iconStyle} className="icon"
/> style={iconStyle}
</a> />
</li> </a>
<li className="navbar-list-item"> </li>
<a href="/resume" title="Resume"> ))}
<img
src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg"
className="icon"
style={iconStyle}
/>
</a>
</li>
</ul> </ul>
</nav> </nav>
); );

View file

@ -1,6 +1,7 @@
--- ---
title: GPG Key title: GPG Key
description: Information about my public GPG key and how to obtain it. description: Information about my public GPG key and how to obtain it.
nav_icon: https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg
--- ---
> I do not use keyservers. This is the only place where I provide my public key. A key claiming to be mine somewhere else is definitely a fake. > I do not use keyservers. This is the only place where I provide my public key. A key claiming to be mine somewhere else is definitely a fake.

View file

@ -1,6 +1,7 @@
--- ---
title: Resume title: Resume
description: My experience, skills, education, etc. description: My experience, skills, education, etc.
nav_icon: https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg
--- ---
## Experience ## Experience