mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
59 lines
No EOL
1.3 KiB
Svelte
59 lines
No EOL
1.3 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import { translatePath } from '$lib/i18n';
|
|
import { availableLanguageTags, languageTag } from '$paraglide/runtime';
|
|
import * as m from "$paraglide/messages";
|
|
|
|
$: pathname = $page.url.pathname;
|
|
$: lang = languageTag();
|
|
</script>
|
|
|
|
<header aria-label="header navigation">
|
|
<nav>
|
|
<a href='/' class:active={pathname === '/'}>{m.nav_home()}</a>
|
|
<a
|
|
href={`/${lang}/${m.nav_about_link()}`}
|
|
class:active={pathname === `/${m.nav_about_link()}`}
|
|
>
|
|
{m.nav_about()}
|
|
</a>
|
|
<a
|
|
href={`/${lang}/${m.nav_portfolio_link()}`}
|
|
class:active={pathname === `/${m.nav_portfolio_link()}`}
|
|
>
|
|
{m.nav_portfolio()}
|
|
</a>
|
|
<a
|
|
href={`/${lang}/${m.nav_uses_link()}`}
|
|
class:active={pathname === `/${m.nav_uses_link()}`}
|
|
>
|
|
{m.nav_uses()}
|
|
</a>
|
|
<select on:change={(e) => goto(translatePath(pathname, e?.target?.value)) }>
|
|
{#each availableLanguageTags as lang}
|
|
<option value={lang} selected={lang === languageTag()}>{lang}</option>
|
|
{/each}
|
|
</select>
|
|
</nav>
|
|
</header>
|
|
|
|
<style lang="postcss">
|
|
nav {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
justify-content: right;
|
|
align-content: center;
|
|
|
|
@media (max-width: 650px) {
|
|
justify-content: center;
|
|
}
|
|
|
|
margin: 0.5rem;
|
|
padding: 2rem;
|
|
|
|
& a + a {
|
|
margin-left: 25px;
|
|
}
|
|
}
|
|
</style> |