changed navbar for phone and laptop

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,7 +26,10 @@
 		</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>

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>