---
const routes = {
  Home: "/",
  Projects: "/projects",
  //Skills: "/skills",
  Blog: "/blog",
};
import "../styles/navbar.scss";
import Logo from "../../public/favicon.svg?raw";
import { Icon } from "astro-icon/components";
---

<header>
  <nav>
    <a class="logo" href="/"><Fragment set:html={Logo} /></a>
    {
      Object.entries(routes).map(([pageName, path]) => {
        const isActive =
          (Astro.url.pathname.startsWith(path) && path !== "/") ||
          Astro.url.pathname === path;
        return (
          <div class="navbar-entry">
            <a href={path} class={isActive ? "active" : ""}>
              {pageName}

              {isActive ? (
                <div class="highlighter">
                  <img src="/nav_highlight.svg" />
                </div>
              ) : null}
            </a>
          </div>
        );
      })
    }
  </nav>
  <div class="social">
    <a href="https://github.com/vaporvee" target="_blank"
      ><Icon class="icon" size={25} name="mdi:github" /></a
    >
    <a href="https://discord.com/invite/EBdaTefpWy" target="_blank"
      ><Icon class="icon" size={25} name="prime:discord" /></a
    >
    <a
      href="https://www.linkedin.com/in/yannik-ain/"
      style="margin-right:4px;"
      target="_blank"><Icon class="icon" size={25} name="mdi:linkedin" /></a
    >
    <span>|</span>
    <a
      style="font-weight: 700; margin-left: 5px; text-decoration: none; color: white"
      target="_blank"
      href="https://docs.vaporvee.com/#">Docs</a
    >
  </div>
</header>
