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

---
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}
    tabindex="0"
  >
    <i class={icon}></i>
    {text}
  </a>
</li>

<style>
  li {
    align-items: center;
    justify-content: center;
    text-align: left;
    display: flex;
    width: 200px;
  }
  li > a {
    display: inline-flex;
    color: white;
    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-purplepink);
  }
  .current {
    color: var(--c-darkpurple) !important;
  }
</style>