From a545cbfcca7b8380e57001fc56590c53248c6d10 Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Fri, 7 Nov 2025 00:08:21 +0800
Subject: [PATCH] Add AppNavbar component to the main page layout

---
 app/components/AppNavbar.vue | 29 +++++++++++++++++++++++++++++
 app/pages/index.vue          |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 app/components/AppNavbar.vue

diff --git a/app/components/AppNavbar.vue b/app/components/AppNavbar.vue
new file mode 100644
index 0000000..b5526c2
--- /dev/null
+++ b/app/components/AppNavbar.vue
@@ -0,0 +1,29 @@
+<template>
+  <nav class="sticky top-0 z-30 border-b border-slate-800/60 bg-slate-950/80 backdrop-blur">
+    <div class="mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between gap-6">
+        <p class="text-lg font-semibold text-white sm:text-xl">Slipmatz</p>
+        <div class="flex items-center gap-3">
+          <button
+            type="button"
+            class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-slate-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+          >
+            Login
+          </button>
+          <button
+            type="button"
+            class="rounded-full bg-sky-500/90 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+          >
+            Register
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-rose-500 hover:text-rose-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 55316b5..afa4d4b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -49,6 +49,7 @@ const handleExport = async () => {
 
 <template>
   <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
+    <AppNavbar />
     <div class="mx-auto max-w-6xl px-4 pt-12 sm:px-6 lg:px-8">
       <header class="space-y-3">
         <p class="text-sm uppercase tracking-[0.35em] text-sky-400">