firq-dev-website/src/components/navbar/navbarEntry.astro

93 lines
1.7 KiB
Text
Raw Normal View History

2023-03-04 19:11:52 +01:00
---
export interface Props {
2023-03-09 11:44:18 +01:00
currentPage?: string
2024-07-19 22:52:15 +02:00
navtype: 'mobile' | 'desktop'
2023-03-09 11:44:18 +01:00
link: string
text: string
2023-12-29 22:57:30 +01:00
icon: ImageMetadata
2023-03-04 19:11:52 +01:00
}
const { icon, text, link, navtype, currentPage } = Astro.props
2023-03-04 19:11:52 +01:00
2023-03-09 11:44:18 +01:00
let currPage = ''
const slug = link.replace(new RegExp('/', 'g'), '')
2023-03-04 19:11:52 +01:00
2023-03-04 22:35:49 +01:00
if (currentPage === slug) {
2023-03-09 11:44:18 +01:00
currPage = 'current'
} else if (currentPage === 'home' && link === '/') {
currPage = 'current'
2023-03-04 19:11:52 +01:00
}
2023-03-04 22:35:49 +01:00
2024-07-19 22:52:15 +02:00
const icon_src_url = `url("${icon.src}")`
2023-03-09 11:44:18 +01:00
const fulllink = `/${slug}`
2024-07-19 22:52:15 +02:00
let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
2023-03-04 19:11:52 +01:00
---
<li>
2023-03-09 11:44:18 +01:00
<a
href={fulllink}
rel="noopener noreferrer"
aria-label={text}
class={currPage}
2024-07-19 22:52:15 +02:00
role="button"
{...extraattributes}
2023-03-09 11:44:18 +01:00
>
2023-12-29 22:57:30 +01:00
<div class="icon"></div>
2023-03-09 11:44:18 +01:00
{text}
</a>
2023-03-04 19:11:52 +01:00
</li>
2023-12-29 22:57:30 +01:00
<style define:vars={{ icon_src_url }}>
2024-10-29 22:17:38 +01:00
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
2023-03-09 11:44:18 +01:00
li {
align-items: center;
justify-content: center;
text-align: left;
display: flex;
}
2023-12-29 22:57:30 +01:00
2023-03-09 11:44:18 +01:00
li > a {
display: inline-flex;
2024-10-24 18:52:33 +02:00
color: var(--c-primary-text);
2023-03-09 11:44:18 +01:00
text-decoration: none;
justify-content: center;
2023-12-21 11:39:45 +01:00
align-items: center;
2023-03-09 11:44:18 +01:00
font-size: 1.4em;
height: 100%;
font-weight: bold;
gap: 0.2em;
2023-03-09 11:44:18 +01:00
}
2023-12-29 22:57:30 +01:00
2023-03-09 11:44:18 +01:00
li > a:hover {
2024-10-24 18:52:33 +02:00
color: var(--c-accent-1-alt) !important;
2023-03-09 11:44:18 +01:00
}
2023-12-29 22:57:30 +01:00
li > a:hover > .icon {
2024-10-24 18:52:33 +02:00
background-color: var(--c-accent-1-alt) !important;
2023-12-29 22:57:30 +01:00
}
2023-03-09 11:44:18 +01:00
.current {
2024-10-24 18:52:33 +02:00
color: var(--c-accent-1) !important;
2023-03-09 11:44:18 +01:00
}
2023-12-29 22:57:30 +01:00
.current > .icon {
2024-10-24 18:52:33 +02:00
background-color: var(--c-accent-1) !important;
2023-12-29 22:57:30 +01:00
}
.icon {
mask: var(--icon_src_url) no-repeat center;
2024-10-24 18:52:33 +02:00
background-color: var(--c-primary-text);
2023-12-29 22:57:30 +01:00
width: 1.4em;
height: 1.4em;
}
2025-04-07 22:47:03 +02:00
@media (min-width: 304px) {
li {
width: 200px;
}
}
2023-03-09 11:44:18 +01:00
</style>