58 lines
966 B
Text
58 lines
966 B
Text
---
|
|
export interface Props {
|
|
currentPage?: string
|
|
link: string
|
|
text: string
|
|
icon: string
|
|
}
|
|
|
|
const { icon, text, link, 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 fulllink = `/${slug}`
|
|
---
|
|
|
|
<li>
|
|
<a
|
|
href={fulllink}
|
|
rel="noopener noreferrer"
|
|
aria-label={text}
|
|
class={currPage}
|
|
>
|
|
<i class={icon}></i>
|
|
{text}
|
|
</a>
|
|
</li>
|
|
|
|
<style>
|
|
li {
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: left;
|
|
display: flex;
|
|
width: 200px;
|
|
}
|
|
li > a {
|
|
color: white;
|
|
text-decoration: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.4em;
|
|
height: 100%;
|
|
font-weight: bold;
|
|
}
|
|
li > a:hover {
|
|
color: var(--c-purplepink);
|
|
}
|
|
.current {
|
|
color: var(--c-darkpurple);
|
|
}
|
|
</style>
|