first commit

src/lib/components/HeaderBar.svelte

@@ -0,0 +1,67 @@
+<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>