From 174beae4eae2b8e5c60106faf26ab0bd76a93dc1 Mon Sep 17 00:00:00 2001
From: "paololahoud2004@gmail.com" <paololahoud2004@gmail.com>
Date: Mon, 3 Nov 2025 20:36:39 -0500
Subject: [PATCH] changed navbar for phone and laptop

---
 src/components/layout/NavBar.svelte    |  9 ++++++---
 src/components/layout/NavButton.svelte | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/NavBar.svelte b/src/components/layout/NavBar.svelte
index 76051ed..93bd64a 100644
--- a/src/components/layout/NavBar.svelte
+++ b/src/components/layout/NavBar.svelte
@@ -16,7 +16,7 @@
 
 			<button
 				type="button"
-				class="bg-ecsess-black-hover hover:bg-ecsess-800 grid size-10 place-items-center rounded-md transition-colors ease-in-out active:bg-ecsess-900"
+				class="bg-ecsess-black-hover hover:bg-ecsess-800 active:bg-ecsess-900 grid size-10 place-items-center rounded-md transition-colors ease-in-out"
 				onclick={() => {
 					menuHidden = !menuHidden;
 				}}
@@ -26,13 +26,16 @@
 		</div>
 
 		{#if !menuHidden}
-			<div class="flex flex-col place-items-center gap-1" transition:slide>
+			<div
+				class="bg-ecsess-900 border-ecsess-700 mx-2 mb-2 flex w-auto flex-col gap-1 rounded-lg border-2 px-2 py-2 shadow-lg"
+				transition:slide
+			>
 				<NavButton href="/">Home</NavButton>
 				<NavButton href="/council">Meet the council</NavButton>
 				<NavButton href="/events">Events</NavButton>
 				<NavButton href="/resources">Resources</NavButton>
 				{#if isElectionTime}
-				<NavButton href="/join">Join ECSESS</NavButton>
+					<NavButton href="/join">Join ECSESS</NavButton>
 				{/if}
 			</div>
 		{/if}
diff --git a/src/components/layout/NavButton.svelte b/src/components/layout/NavButton.svelte
index 719fff3..a1d2709 100644
--- a/src/components/layout/NavButton.svelte
+++ b/src/components/layout/NavButton.svelte
@@ -1,11 +1,21 @@
 <script>
+	import { page } from '$app/stores';
+
 	let { href, children } = $props();
+
+	// Check if this button's href matches the current page
+	const isActive = $derived($page.url.pathname === href);
 </script>
 
-<a {href}>
+<!-- border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 border-b-4 px-6 py-2
+font-semibold transition-all hover:text-ecsess-100 -->
+
+<a {href} class="w-full md:w-auto">
 	<button
-		class="border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 border-b-4 px-6 py-2
-    font-semibold transition-all hover:text-ecsess-100"
+		class="hover:text-ecsess-100 w-full rounded-md px-6 py-2 font-semibold transition-all md:mx-0.5 md:w-auto md:rounded-none
+		{isActive
+			? 'border-ecsess-300 bg-ecsess-800 md:border-b-4 md:bg-transparent'
+			: 'border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 hover:bg-ecsess-800 active:bg-ecsess-700 md:border-b-4 md:hover:bg-transparent md:active:bg-transparent'}"
 	>
 		{@render children()}
 	</button>