84 lines
1.4 KiB
Text
84 lines
1.4 KiB
Text
---
|
|
import { Icon } from 'astro-icon/components'
|
|
import type { Link } from '../constants/links'
|
|
|
|
export interface Props {
|
|
links: Link[]
|
|
}
|
|
|
|
let { links } = Astro.props
|
|
|
|
if (Astro.url.pathname !== '/') {
|
|
links = [
|
|
{
|
|
url: '/',
|
|
icon: 'home',
|
|
},
|
|
].concat(links)
|
|
}
|
|
---
|
|
|
|
<nav>
|
|
<div id="wrapper">
|
|
{
|
|
links
|
|
.filter((link) => link.url !== '')
|
|
.map((link) => (
|
|
<a
|
|
class:list={[
|
|
{
|
|
'u-url': !link.excludeHCard,
|
|
},
|
|
]}
|
|
href={link.url}
|
|
aria-label={link.text}
|
|
>
|
|
<Icon
|
|
width="1.5em"
|
|
height="1.5em"
|
|
name={`${link.set ?? 'mdi'}:${link.icon}`}
|
|
/>{' '}
|
|
{link.text ?? link.icon}
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
nav {
|
|
background: var(--ayo-gradient);
|
|
display: flex;
|
|
margin: 0 auto;
|
|
}
|
|
nav a {
|
|
display: inline-block;
|
|
text-decoration: underline;
|
|
color: var(--text-color-light);
|
|
padding: 0.5em 1em;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
nav a:hover {
|
|
color: var(--color-brand-complement);
|
|
}
|
|
|
|
#wrapper {
|
|
flex: 1;
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
text-align: right;
|
|
}
|
|
|
|
@media only screen and (max-device-width: 360px) {
|
|
#wrapper {
|
|
text-align: center;
|
|
}
|
|
nav a {
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
|
|
a {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|