50 lines
970 B
Text
50 lines
970 B
Text
|
---
|
||
|
|
export interface Props {
|
||
|
|
currentPage?: string;
|
||
|
|
link: string;
|
||
|
|
text: string;
|
||
|
|
icon: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const {icon, text, link, currentPage } = Astro.props;
|
||
|
|
|
||
|
|
let currPage = "";
|
||
|
|
|
||
|
|
if (currentPage === link.replace(new RegExp('/', 'g'), "")) {
|
||
|
|
currPage = "current"
|
||
|
|
} else if (currentPage === "home" && link === "/") {
|
||
|
|
currPage = "current"
|
||
|
|
}
|
||
|
|
---
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href={link} 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: #551a8b;
|
||
|
|
}
|
||
|
|
.current {
|
||
|
|
color: #b86cffed;
|
||
|
|
}
|
||
|
|
</style>
|