<template>
  <header class="flex flex-row items-center gap-2 pb-4 border-b-2 sm:gap-4 lg:pb-8">
    <span class="px-3 py-2 rounded bg-fuchsia-300">
      <svg
        class="inline stroke-purple-900"
        height="32"
        viewBox="0 0 21 21"
        width="21"
        xmlns="http://www.w3.org/2000/svg"
      ><g
        fill="none"
        fill-rule="evenodd"
        stroke-linecap="round"
        stroke-linejoin="round"
        transform="translate(4 3)"
      ><path d="m6.5.5 6 4v6l-6 4-6-4v-6z" /><circle
        cx="6.5"
        cy="7.5"
        r="3"
      /></g></svg>
    </span>

    <h1 class="font-bold font-mono text-2xl text-gray-900 lg:text-4xl hidden md:block md:visible">
      OG:IMAGE
    </h1>

    <div class="ml-auto">
      <RouterLink
        v-slot="{isActive, href, navigate}"
        :to="{name: 'home'}"
        custom="true"
      >
        <a
          v-bind="$attrs"
          :href="href"
          class="rounded ml-2 p-3"
          :class="{'bg-slate-300': isActive}"
          @click="navigate"
        >
          <svg
            class="inline"
            height="21"
            viewBox="0 0 21 21"
            width="21"
            xmlns="http://www.w3.org/2000/svg"
          ><g
            fill="none"
            fill-rule="evenodd"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            transform="translate(1 1)"
          ><path d="m.5 9.5 9-9 9 9" /><path d="m2.5 7.5v8c0 .5522847.44771525 1 1 1h3c.55228475 0 1-.4477153 1-1v-4c0-.5522847.44771525-1 1-1h2c.5522847 0 1 .4477153 1 1v4c0 .5522847.4477153 1 1 1h3c.5522847 0 1-.4477153 1-1v-8" /></g></svg>

          Home
        </a>
      </RouterLink>

      <RouterLink
        v-slot="{isActive, href, navigate}"
        :to="{name: 'About'}"
        custom="true"
      >
        <a
          v-bind="$attrs"
          :href="href"
          class="rounded ml-2 p-3"
          :class="{'bg-slate-300': isActive}"
          @click="navigate"
        >
          <svg
            class="inline"
            height="21"
            viewBox="0 0 21 21"
            width="21"
            xmlns="http://www.w3.org/2000/svg"
          ><g
            fill="none"
            fill-rule="evenodd"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            transform="translate(3 3)"
          ><circle
            cx="7.5"
            cy="5.5"
            r="2"
          /><path d="m.5 3.5h1v-1c0-1.1045695.8954305-2 2-2h8c1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-1h-1" /><path d="m.5 7.5h1" /><path d="m.5 5.5h1" /><path d="m.5 9.5h1" /><path d="m10.5 10.5v-1c0-1.1045695-.8954305-2-2-2h-2c-1.1045695 0-2 .8954305-2 2v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1z" /></g></svg>

          About
        </a>
      </RouterLink>
    </div>
  </header>
</template>
