diff options
Diffstat (limited to 'src/lib/components/Nav.svelte')
| -rw-r--r-- | src/lib/components/Nav.svelte | 25 |
1 files changed, 14 insertions, 11 deletions
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte index f6c83fc..725c098 100644 --- a/src/lib/components/Nav.svelte +++ b/src/lib/components/Nav.svelte @@ -3,11 +3,11 @@ </script> <nav class="navbar"> - <a href="/" class:active={$page.url.pathname === '/'}>List</a> - <a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalog</a + <a href="/" class:active={$page.url.pathname === '/'}>Liste</a> + <a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalogue</a > <a href="/categories" class:active={$page.url.pathname === '/categories'} - >Categories</a + >Catégories</a > </nav> @@ -15,29 +15,32 @@ .navbar { display: flex; gap: 0.25rem; - padding: 0.5rem 0; - border-bottom: 1px solid #ddd; + padding: 0.75rem 0; + border-bottom: 1px solid var(--border); position: sticky; top: 0; - background: #fafafa; + background: var(--bg); z-index: 20; } .navbar a { padding: 0.5rem 1rem; - border-radius: 0.5rem; - color: #333; + border-radius: 9999px; + color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; - transition: background 0.15s; + font-weight: 500; + transition: all 0.2s ease; } .navbar a:hover { - background: #f5f5f5; + color: var(--text); + background: var(--surface); } .navbar a.active { - background: #333; + background: var(--accent); color: #fff; + box-shadow: 0 1px 2px var(--shadow); } </style> |