--- 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>