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

---
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="navigation"
    {...extraattributes}
  >
    <div class="icon"></div>
    {text}
  </a>
</li>

<style define:vars={{ icon_src_url }}>
  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);
  }

  li > a:hover > .icon {
    background-color: var(--c-purplepink);
  }

  .current {
    color: var(--c-darkpurple) !important;
  }

  .current > .icon {
    background-color: var(--c-darkpurple) !important;
  }

  .icon {
    mask: var(--icon_src_url) no-repeat center;
    background-color: white;
    width: 1.4em;
    height: 1.4em;
  }
</style>