saiblog/src/components/Header.astro

---
import HeaderLink from './HeaderLink.astro'
import GitHub from './icons/GitHub.astro'
import GitLab from './icons/GitLab.astro'
import Mastodon from './icons/Mastodon.astro'
import { SITE_TITLE } from '../config'
---

<header class="mt-8">

  <nav class="gap-4 lg:gap-2 flex lg:flex-row flex-col items-center">
    <h2 class="text-3xl text-white font-semibold mr-4">
      {SITE_TITLE}
    </h2>

    <div>
      <HeaderLink href="/">Home</HeaderLink>
      <HeaderLink href="/posts">Posts</HeaderLink>
    </div>

    <div class="lg:ml-auto space-x-4 mt-2 lg:mt-0">
      <a
        class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
        href="https://flausch.social/@saibotk"
        target="_blank"
        aria-label="Link to my Mastodon account"
      >
        <Mastodon class="w-6" />
      </a>
      <a
        class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
        href="https://git.saibotk.de/saibotk"
        target="_blank"
        aria-label="Link to my Gitlab account"
      >
        <GitLab class="w-6" />
      </a>
      <a
        class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
        href="https://github.com/saibotk"
        target="_blank"
        aria-label="Link to my GitHub account"
      >
        <GitHub class="w-6" />
      </a>
    </div>
  </nav>
</header>