diff options
Diffstat (limited to 'src/lib/components/Nav.svelte')
| -rw-r--r-- | src/lib/components/Nav.svelte | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte new file mode 100644 index 0000000..2899bfc --- /dev/null +++ b/src/lib/components/Nav.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import { page } from '$app/stores'; +</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="/categories" class:active={$page.url.pathname === '/categories'} + >Categories</a + > +</nav> + +<style> + .navbar { + display: flex; + gap: 0.25rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid #ddd; + padding-bottom: 0.5rem; + } + + .navbar a { + padding: 0.5rem 1rem; + border-radius: 0.5rem; + color: #333; + text-decoration: none; + font-size: 0.875rem; + transition: background 0.15s; + } + + .navbar a:hover { + background: #f5f5f5; + } + + .navbar a.active { + background: #333; + color: #fff; + } +</style> |