more navbar styling

Small-Fish-Dev · Oct 20, 2024 · 56cbb83 · 56cbb83
1 parent fcdc92f
commit 56cbb83
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/src/lib/components/Nav-Button.svelte b/src/lib/components/Nav-Button.svelte
@@ -1,21 +1,27 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import { page } from '$app/stores';
 
 	export let href: string;
 	export let icon: string;
 	export let label: string;
 	export let disabled: boolean = false;
+
+	const isCurrent = function (): boolean {
+		return $page.url.pathname.startsWith(href);
+	};
 </script>
 
 <a
 	{href}
-	class="nav-button flex items-center whitespace-nowrap px-2 py-1 font-poppins
+	class="nav-button flex h-full items-center whitespace-nowrap px-4 py-1
+		   font-poppins
 		   text-xl
 		   font-medium
-		   text-white
 		   transition-all
 		   hover:scale-110
-		   {disabled ? 'pointer-events-none opacity-75' : 'pointer-events-auto'}"
+		   {isCurrent() ? 'bg-white text-blue' : 'text-white'}
+		   {disabled ? 'pointer-events-none' : 'pointer-events-auto'}"
 >
 	<Icon {icon} class="mr-2" />
 	<p>{label}</p>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -37,18 +37,18 @@
 	<Snow />
 {/if}
 
-<nav class="sticky top-0 z-50 mx-auto flex w-full flex-col bg-blue p-2 drop-shadow-md">
-	<div class="container mx-auto flex flex-row items-center justify-between">
+<nav class="sticky top-0 z-50 mx-auto flex w-full flex-col bg-blue drop-shadow-md">
+	<div class="container mx-auto flex h-16 flex-row items-center justify-between px-2">
 		<a
 			href="/"
-			class="group pointer-events-auto flex items-center font-poppins text-xl font-bold text-white transition-all hover:scale-105 active:scale-95"
+			class="group pointer-events-auto flex items-center py-2 font-poppins text-xl font-bold text-white transition-all hover:scale-105 active:scale-95"
 		>
-			<img src="/common/logo-square.png" alt="square logo" class="h-12 pr-2" />
+			<img src="/common/logo-square.png" alt="square logo" class="h-14 pr-2" />
 			<p>small fish</p>
 		</a>
-		<div class="hidden flex-row items-center gap-2 md:flex">
+		<div class="hidden h-full flex-row items-center gap-2 md:flex">
 			{#each routes as route}
-				<div>
+				<div class="h-full">
 					<NavButton
 						href={route.href}
 						icon={route.icon}
@@ -77,13 +77,18 @@
 	</div>
 	{#if isMenuOpen}
 		<div
-			class="container mx-auto flex flex-col gap-2 pt-2 font-poppins text-xl font-medium text-white md:hidden"
+			class="container mx-auto flex flex-col gap-2 p-4 pt-2 font-poppins text-xl font-medium text-white md:hidden"
 			transition:slide={{ duration: 300 }}
 		>
 			{#each routes as route}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<a href={route.href} class="flex origin-left items-center transition-all active:scale-95">
+				<a
+					href={route.href}
+					class="flex origin-left {$page.url.pathname == route.href
+						? 'opacity-75'
+						: ''} items-center transition-all active:scale-95"
+				>
 					<Icon icon={route.icon} class="mr-2" />
 					<p>{route.label}</p>
 				</a>