Added header navigation links

SamElfring · Sep 22, 2023 · f74be97 · f74be97
1 parent e922efc
commit f74be97
Showing 1 changed file with 28 additions and 3 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,6 +1,31 @@
 <template>
-    <nav class="flex items-center">
-        <div class="bg-blue-600 px-3 py-1 mr-2 rounded-full font-black text-lg">S</div>
-        <h2 class="text-lg font-bold">Sam Elfring</h2>
+    <nav class="flex justify-between items-center">
+        <div class="flex items-center">
+            <div class="bg-blue-600 px-3 py-1 mr-2 rounded-full font-black text-lg">S</div>
+            <h2 class="text-lg font-bold">Sam Elfring</h2>
+        </div>
+
+        <ul class="hidden md:flex gap-4">
+            <li
+                v-for="link in navLinks"
+            >
+                <a
+                    :href="link.link"
+                    class="text-slate-400 hover:underline hover:text-white"
+                >
+                    {{ link.name }}
+                </a>
+            </li>
+        </ul>
     </nav>
 </template>
+
+<script setup>
+const navLinks = [
+    { name: "Over mij", link: "#about-me" },
+    { name: "Ervaringen", link: "#experiences" },
+    { name: "Opleidingen", link: "#study" },
+    { name: "Projecten", link: "#projects" },
+    { name: "Vaardigheden", link: "#skills" }
+];
+</script>