From 09299dad0bde18929e7d7f5c9f6f51545363a6f8 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Wed, 20 Dec 2023 20:47:14 +0200
Subject: [PATCH] feat: add top navigation links

---
 components/introduction.vue | 34 ++++++++++++++++++++++++++--------
 components/top-nav.vue      | 20 ++++++++++++++++++--
 layouts/default.vue         |  2 +-
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/components/introduction.vue b/components/introduction.vue
index 4798c86..bfd4ce9 100644
--- a/components/introduction.vue
+++ b/components/introduction.vue
@@ -1,13 +1,31 @@
 <template>
   <UContainer class="flex flex-col md:gap-12 gap-5" as="header">
-    <nuxt-img
-      placeholder
-      alt="Marios Antonoudiou"
-      src="mariosant.webp"
-      width="64"
-      height="64"
-      class="w-16 h-16 rounded-full border dark:border-gray-800 dark:bg-slate-300"
-    />
+    <div class="flex items-center justify-between">
+      <nuxt-img
+        placeholder
+        alt="Marios Antonoudiou"
+        src="mariosant.webp"
+        width="64"
+        height="64"
+        class="w-16 h-16 rounded-full border dark:border-gray-800 dark:bg-slate-300"
+      />
+
+      <div class="flex gap-3 items-center justify-end">
+        <ULink
+          to="/"
+          class="text-slate-600 font-semibold underline-offset-4"
+          activeClass="text-slate-800 dark:text-slate-200 underline"
+          >Home</ULink
+        >
+
+        <ULink
+          to="/articles"
+          class="text-slate-600 font-semibold underline-offset-4"
+          activeClass="text-slate-800 dark:text-slate-200 underline"
+          >Articles</ULink
+        >
+      </div>
+    </div>
     <h1 class="md:text-xl text-lg font-semibold">
       <ULink
         class="text-blue-500 dark:text-blue-300 hover:underline hover:underline-offset-4"
diff --git a/components/top-nav.vue b/components/top-nav.vue
index d6feea2..b3379c4 100644
--- a/components/top-nav.vue
+++ b/components/top-nav.vue
@@ -8,9 +8,25 @@
           src="mariosant.webp"
           class="w-10 h-10 rounded-full border dark:border-gray-800 dark:bg-slate-300 block"
         />
-        <div class="font-bold">Marios Antonoudiou</div>
+        <div class="font-bold text-blue-500 dark:text-blue-300">
+          Marios Antonoudiou
+        </div>
       </ULink>
-      <div class="flex gap-3 items-center justify-end"></div>
+      <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>
diff --git a/layouts/default.vue b/layouts/default.vue
index f4839ba..1ab953c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,7 +4,7 @@ useHead({
     lang: "en",
   },
   bodyAttrs: {
-    class: "dark:bg-slate-900",
+    class: "dark:bg-slate-900 ",
   },
 });
 </script>