blog/src/components/widget/NavMenuPanel.astro

---
import { type NavBarLink } from '../../types/config'
import { Icon } from 'astro-icon/components'
import { url } from '../../utils/url-utils'

interface Props {
  links: NavBarLink[]
}

const links = Astro.props.links
---
<div id="nav-menu-panel" class:list={["float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"]}>
    {links.map((link) => (
        <a href={link.external ? link.url : url(link.url)} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
        "
           target={link.external ? "_blank" : null}
        >
            <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]">
                {link.name}
            </div>
            {!link.external && <Icon name="material-symbols:chevron-right-rounded"
                  class="transition text-[1.25rem] text-[var(--primary)]"
            >
            </Icon>}
            {link.external && <Icon name="fa6-solid:arrow-up-right-from-square"
                  class="transition text-[0.75rem] text-black/25 dark:text-white/25 -translate-x-1"
            >
            </Icon>}
        </a>
    ))}
</div>