Announcement on navbar

src/components/layout/NavBar.svelte

@@ -4,9 +4,14 @@
 	import { Menu } from '@lucide/svelte';
 	import { slide } from 'svelte/transition';
 	let menuHidden = $state(true);
+
+	const announcementIntro = 'ECSESS Election: Nomination period is happening! See more info: ';
+	const announcementLinkUrl = 'https://ecsess.mcgilleus.ca/join';
+	const announcementLinkText = 'ecsess.mcgilleus.ca/join';
 </script>
 
-<nav class="bg-ecsess-black text-ecsess-100 sticky w-full py-1">
+<div class="sticky top-0 z-40 w-full">
+	<nav class="bg-ecsess-black text-ecsess-100 w-full py-1">
 		<!-- Small screens -->
 		<div class="block md:hidden">
 			<div class="mx-4 flex items-center-safe justify-between">
@@ -54,4 +59,16 @@
 				<NavButton href="/join">Join ECSESS</NavButton>
 			</div>
 		</div>
-</nav>
+	</nav>
+	<!-- Small announcement underneath navbar -->
+	<div class="border-ecsess-black bg-ecsess-800 border-b px-4 py-2 shadow-sm" role="alert">
+		<p class="text-ecsess-100 text-center text-sm font-medium md:text-base">
+			{announcementIntro}<a
+				href={announcementLinkUrl}
+				class="text-ecsess-50 decoration-ecsess-400 hover:decoration-ecsess-300 underline underline-offset-2"
+			>
+				{announcementLinkText}
+			</a>
+		</p>
+	</div>
+</div>