src/i18n/translations.js

@@ -5,6 +5,9 @@ export default {
       "head.keywords": "free embroidery file viewer, open PES files online, view DST files, embroidery file preview, EXP file viewer, multiple embroidery files",
       "head.ogtitle": "Free Online Embroidery File Viewer – Open PES, DST & More",
       "head.ogdescription": "Upload and preview multiple embroidery files like PES, DST, and EXP online for free. No software needed!",
+      "nav.home": "Home",
+      "nav.donate": "Donate",
+      "nav.about": "About",
       "main.title": "Upload files",
       "main.languageSwitch": "Mudar para Português",
       "main.fileSize": "Max file size is <strong>{{fileSize}}kb</strong>.",
@@ -25,6 +28,9 @@ export default {
       "head.keywords": "visualizador de arquivos de bordado grátis, abra arquivos PES online, visualize arquivos DST, pré-visualização de arquivos de bordado, visualizador de arquivos EXP, vários arquivos de bordado",
       "head.ogtitle": "Visualizador de arquivos de bordado online gratuito – Abra PES, DST e mais",
       "head.ogdescription": "Carregue e visualize vários arquivos de bordado como PES, DST e EXP online gratuitamente. Não precisa de software!",
+      "nav.home": "Página Inicial",
+      "nav.donate": "Doe",
+      "nav.about": "Sobre",
       "main.title": "Carregar arquivos",
       "main.languageSwitch": "Switch to English",
       "main.fileSize": "O tamanho máximo do arquivo é <strong>{{fileSize}}kb</strong>.",

src/lib/Header.svelte

@@ -1,42 +1,143 @@
 <script>
   import MediaQuery from "../lib/MediaQuery.svelte";
-  import logo from "../assets/embroidery-viewer-logo.webp";
-  import logoMobile from "../assets/embroidery-viewer-logo-mobile.webp";
+  import logo from "../assets/logo.webp";
+  import { t, locale, locales } from "../i18n"
 
   const configsFor = (matches) => {
     return matches
-      ? { src: logoMobile, width: 350, height: 96 }
-      : { src: logo, width: 460, height: 200 };
+      ? { src: logo, width: 150, height: 70} // mobile
+      : { src: logo, width: 150, height: 100 }; // desktop
   };
+
+  const navLinks = [
+    { name: () => $t("nav.home"), href: '/' },
+    { name: () => $t("nav.donate"), href: '/donate' },
+    { name: () => $t("nav.about"), href: '/about' },
+  ];
+
+  let isMenuOpen = false;
 </script>
 
   <header>
-  <a href="/">
-    <MediaQuery query="(min-width: 481px) and (max-width: 812px)" let:matches>
+  <div class="logo">
+    <MediaQuery query="(max-width: 768px)" let:matches>
       {@const configs = configsFor(matches)}
-      <img
-        class="logo"
-        alt="Embroidery viewer logo."
-        src={configs.src}
-        width={configs.width}
-        height={configs.height}
-      />
-    </MediaQuery>
+          <a href="/">
+           <img src={configs.src} alt="Embroidery viewer logo" width={configs.width} height={configs.height}/>
           </a>
+    </MediaQuery>
+  </div>
+
+  <MediaQuery query="(max-width: 768px)" let:matches >
+    <slot let-matches>
+      {#if matches}
+        <button class="hamburger" on:click={() => (isMenuOpen = !isMenuOpen)}>
+          {#if isMenuOpen}x{:else}☰{/if}
+        </button>
+      {/if}
+    </slot>
+  </MediaQuery>
+
+  <nav class:is-open={isMenuOpen}>
+    <ul>
+      {#each navLinks as link}
+        <li><a href={link.href}>{link.name()}</a></li>
+      {/each}
+    </ul>
+  </nav>
   </header>
 
   <style>
   header {
-    margin-top: 100px;
-  }
-  .logo {
-    background-image: logo;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 100px;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #ddd;
+    width: 100%;
   }
 
-  @media only screen and (max-device-width: 812px) {
-    .logo {
+  .logo img {
+    height: auto;
+    max-height: 60px;
+  }
+
+  .logo a {
+    border-bottom: none;
+  }
+
+  .logo a:hover {
+    background: transparent;
+  }
+
+  nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 20px;
+  }
+
+  nav ul li {
+    display: inline;
+    font-weight: bold;
+  }
+
+  .hamburger {
+    background: none;
+    border: none;
+    font-size: 35px;
+    width: 35px;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    header {
+      padding: 10px 20px ;
+    }
+    .hamburger {
+      display: block;
+      width: 35px;
+    }
+
+    nav {
+      display: none;
+      flex-direction: column;
+      gap: 10px;
+      background-color: #f8f9fa;
+      position: absolute;
+      top: 60px;
+      right: 0;
+      border: 1px solid #ddd;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    nav.is-open {
+      display: inline-block;
+      margin-top: 25px;
       width: 100%;
-      padding: 20px;
+    }
+
+    nav ul {
+      flex-direction: column;
+      gap: 0px;
+      width: 100%;
+    }
+
+    nav ul li {
+      text-align: center;
+      width: 100%;
+    }
+
+    nav ul li a {
+      display: inline-block;
+      width: 100%;
+      padding: 10px;
+      border-bottom: none;
     }
   }
   </style>