67 lines
2.0 KiB
Svelte
67 lines
2.0 KiB
Svelte
<script>
|
|
import { browser } from '$app/environment'
|
|
import { onMount } from 'svelte'
|
|
import { locale, _ } from 'svelte-i18n'
|
|
|
|
const locales = { 'es': '🇪🇸', 'en': '🇺🇸', 'ro': '🇷🇴'}
|
|
const navlinks = { 'capabilities': 'cards', 'projects': 'projects', 'tech': 'stack' }
|
|
|
|
let darkMode = $state(false)
|
|
function toggleDarkMode() {
|
|
if (!browser) return;
|
|
const bodyClasses = document.getElementsByTagName('body')[0].classList
|
|
darkMode = !darkMode
|
|
bodyClasses.remove(darkMode? 'light': 'dark')
|
|
bodyClasses.add(darkMode? 'dark': 'light')
|
|
}
|
|
onMount(()=>{
|
|
darkMode = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) || document.getElementsByTagName('body')[0].classList.contains('dark')
|
|
})
|
|
</script>
|
|
|
|
<h6 class="l m"><a href="#title">Andrei Molnar</a></h6>
|
|
<div class="max l m"></div>
|
|
<div class="l m">
|
|
{#each Object.entries(navlinks) as [id, intl]}
|
|
<a href="#{id}" class="chip round">{$_(`${intl}.slug`)}</a>
|
|
{/each}
|
|
</div>
|
|
<button class="s transparent circle" data-ui="#nav-menu">
|
|
<i>menu</i>
|
|
<menu class="top no-wrap" id="nav-menu">
|
|
<li>
|
|
<a href="#title">Andrei Molnar</a>
|
|
</li>
|
|
{#each Object.entries(navlinks) as [id, intl]}
|
|
<li>
|
|
<a href="#{id}">{$_(`${intl}.slug`)}</a>
|
|
</li>
|
|
{/each}
|
|
</menu>
|
|
</button>
|
|
|
|
<div class="max"></div>
|
|
|
|
<button class="s transparent circle" data-ui="#lang-menu">
|
|
<i>language</i>
|
|
<menu class="top no-wrap" id="lang-menu">
|
|
{#each Object.entries(locales) as [name, flag]}
|
|
<li data-ui="#lang-menu" onclick={()=>$locale = name}>{flag}</li>
|
|
{/each}
|
|
</menu>
|
|
</button>
|
|
<div class="tabs l m">
|
|
{#each Object.entries(locales) as [name, flag]}
|
|
<a
|
|
class:active={$locale == name}
|
|
onclick={()=>$locale = name}>{flag}</a>
|
|
{/each}
|
|
</div>
|
|
|
|
<label class="switch icon">
|
|
<input type="checkbox" onchange={toggleDarkMode} checked={darkMode}>
|
|
<span>
|
|
<i>light_mode</i>
|
|
<i>dark_mode</i>
|
|
</span>
|
|
</label> |