From aedcbd9492ccf489861c26a06f9de961050ffd88 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Wed, 3 Dec 2025 19:14:47 -0500
Subject: [PATCH] Sticky'd navbar

---
 ui/src/App.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 87bd1f1..a656c08 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -22,18 +22,20 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
 
 <template>
   <div class="flex flex-col min-h-screen">
-    <Navbar class="flex"></Navbar>
-    <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
-      <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-        <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
-      </AlertDescription>
-    </Alert>
-    <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
-      <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-        <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
-        <Button variant="secondary">End LOA</Button>
-      </AlertDescription>
-    </Alert>
+    <div class="sticky top-0 bg-background z-50">
+      <Navbar class="flex"></Navbar>
+      <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
+        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+          <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
+        </AlertDescription>
+      </Alert>
+      <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
+        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
+          <Button variant="secondary">End LOA</Button>
+        </AlertDescription>
+      </Alert>
+    </div>
 
     <RouterView class="flex-1 min-h-0"></RouterView>
   </div>