92 lines
1.7 KiB
Text
92 lines
1.7 KiB
Text
---
|
|
export interface Props {
|
|
currentPage?: string
|
|
navtype: 'mobile' | 'desktop'
|
|
link: string
|
|
text: string
|
|
icon: ImageMetadata
|
|
}
|
|
|
|
const { icon, text, link, navtype, currentPage } = Astro.props
|
|
|
|
let currPage = ''
|
|
const slug = link.replace(new RegExp('/', 'g'), '')
|
|
|
|
if (currentPage === slug) {
|
|
currPage = 'current'
|
|
} else if (currentPage === 'home' && link === '/') {
|
|
currPage = 'current'
|
|
}
|
|
|
|
const icon_src_url = `url("${icon.src}")`
|
|
const fulllink = `/${slug}`
|
|
|
|
let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
|
|
---
|
|
|
|
<li>
|
|
<a
|
|
href={fulllink}
|
|
rel="noopener noreferrer"
|
|
aria-label={text}
|
|
class={currPage}
|
|
role="button"
|
|
{...extraattributes}
|
|
>
|
|
<div class="icon"></div>
|
|
{text}
|
|
</a>
|
|
</li>
|
|
|
|
<style define:vars={{ icon_src_url }}>
|
|
* {
|
|
transition: all var(--a-time-default) var(--a-animation-1);
|
|
}
|
|
li {
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: left;
|
|
display: flex;
|
|
}
|
|
|
|
li > a {
|
|
display: inline-flex;
|
|
color: var(--c-primary-text);
|
|
text-decoration: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.4em;
|
|
height: 100%;
|
|
font-weight: bold;
|
|
gap: 0.2em;
|
|
}
|
|
|
|
li > a:hover {
|
|
color: var(--c-accent-1-alt) !important;
|
|
}
|
|
|
|
li > a:hover > .icon {
|
|
background-color: var(--c-accent-1-alt) !important;
|
|
}
|
|
|
|
.current {
|
|
color: var(--c-accent-1) !important;
|
|
}
|
|
|
|
.current > .icon {
|
|
background-color: var(--c-accent-1) !important;
|
|
}
|
|
|
|
.icon {
|
|
mask: var(--icon_src_url) no-repeat center;
|
|
background-color: var(--c-primary-text);
|
|
width: 1.4em;
|
|
height: 1.4em;
|
|
}
|
|
|
|
@media (min-width: 304px) {
|
|
li {
|
|
width: 200px;
|
|
}
|
|
}
|
|
</style>
|