<template>
  <div class="border-b dark:border-b-slate-600">
    <UContainer class="grid grid-cols-2 items-center gap-3 !py-2" as="nav">
      <ULink to="/" class="flex gap-3 items-center">
        <nuxt-img
          placeholder
          alt="Marios Antonoudiou"
          src="mariosant.webp"
          class="w-10 h-10 rounded-full border dark:border-gray-800 dark:bg-slate-300 block"
        />
        <div class="font-bold text-blue-500 dark:text-blue-300">
          Marios Antonoudiou
        </div>
      </ULink>
      <div class="flex gap-3 items-center justify-end text-slate-600">
        <ULink
          to="/"
          class="font-semibold text-sm underline-offset-4"
          activeClass="text-slate-900 dark:text-slate-200 underline"
          >Home</ULink
        >

        <ULink
          to="/articles"
          class="font-semibold text-sm underline-offset-4"
          activeClass="text-slate-900 dark:text-slate-200 underline"
          >Articles</ULink
        >
      </div>
    </UContainer>
  </div>
</template>
