1 files changed, 37 insertions, 15 deletions
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index aa42ace..c5fcc60 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -1,19 +1,27 @@
-<script lang="ts">
+<script>
 	import { page } from '$app/stores';
 </script>
 
 <nav class="navbar">
-	<a href="/" class:active={$page.url.pathname === '/'}>Projets</a>
-	<a href="/groceries" class:active={$page.url.pathname === '/groceries'}
-		>Liste</a
+	<a href="/" data-label="Projets" class:active={$page.url.pathname === '/'}
+		><span>Projets</span></a
+	>
+	<a
+		href="/groceries"
+		data-label="Liste"
+		class:active={$page.url.pathname === '/groceries'}><span>Liste</span></a
 	>
 	<a
 		href="/groceries/catalog"
-		class:active={$page.url.pathname === '/groceries/catalog'}>Catalogue</a
+		data-label="Catalogue"
+		class:active={$page.url.pathname === '/groceries/catalog'}
+		><span>Catalogue</span></a
 	>
 	<a
 		href="/groceries/categories"
-		class:active={$page.url.pathname === '/groceries/categories'}>Catégories</a
+		data-label="Catégories"
+		class:active={$page.url.pathname === '/groceries/categories'}
+		><span>Catégories</span></a
 	>
 </nav>
 
@@ -32,23 +40,37 @@
 	}
 
 	.navbar a {
-		padding: 0.5rem 1rem;
-		border-radius: 9999px;
+		height: 100%;
+		display: inline-grid;
+		align-content: center;
+		padding: 0 0.625rem;
+		font-size: 0.875rem;
 		color: var(--text-secondary);
 		text-decoration: none;
-		font-size: 0.875rem;
-		font-weight: 500;
-		transition: all 0.2s ease;
+	}
+
+	/* Bold ghost reserves the bold advance width in the same grid cell, so the
+	   active tab's font-weight change never moves its siblings. */
+	.navbar a::before {
+		content: attr(data-label);
+		grid-area: 1 / 1;
+		visibility: hidden;
+		font-weight: 700;
+	}
+
+	.navbar a span {
+		grid-area: 1 / 1;
 	}
 
 	.navbar a:hover {
 		color: var(--text);
-		background: var(--surface);
 	}
 
 	.navbar a.active {
-		background: var(--accent);
-		color: var(--white);
-		box-shadow: 0 1px 2px var(--shadow);
+		color: var(--text);
+	}
+
+	.navbar a.active span {
+		font-weight: 700;
 	}
 </style>