From 9b454e0b3477c756c522eef7944cf2de5fb3ca56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 17 Apr 2026 10:21:10 -0300
Subject: [PATCH] feat: add hamburger menu

---
 src/app.html                             |   2 +-
 src/lib/components/Header.svelte         | 317 +++++++++++------------
 src/lib/styles/global.css                |   6 +
 src/routes/+layout.svelte                |   1 +
 src/routes/about/+page.svelte            |   1 +
 src/routes/donate/+page.svelte           |   1 +
 src/routes/privacy-policy/+page.svelte   |   1 +
 src/routes/terms-of-service/+page.svelte |   1 +
 src/routes/viewer/+page.svelte           |   1 +
 9 files changed, 170 insertions(+), 161 deletions(-)
diff --git a/src/app.html b/src/app.html
index 7cb724e..1a3f8ff 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 374a0a9..b13d208 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,97 +1,43 @@
 <script>
-  import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
+  import { resolve } from '$app/paths';
+  import { page } from '$app/state';
   import logo from '$lib/assets/logo.webp';
   import MediaQuery from './MediaQuery.svelte';
-  import { resolve } from '$app/paths';
 
-  /**
-   *
-   * Returns logo image configuration based on the screen size match.
-   *
-   * @param {boolean} matches - The event that triggered the language switch.
-   */
-  const configsFor = (matches) => {
-    return matches
-      ? { src: logo, width: 150, height: 70 } // mobile
-      : { src: logo, width: 150, height: 100 }; // desktop
-  };
-
-  /**
-   * Switches the current locale to the opposite language (EN_US <-> PT_BR).
-   * Prevents the default link behavior (e.g., page jump).
-   *
-   * @param {MouseEvent | KeyboardEvent} e - The event that triggered the language switch.
-   */
-  const onSwitchToOppositeLang = (e) => {
-    e.preventDefault();
-    $locale =
-      $locale === SUPPORTED_LOCALES.EN_US
-        ? SUPPORTED_LOCALES.PT_BR
-        : SUPPORTED_LOCALES.EN_US;
-  };
-
-  let isMenuOpen = false;
+  let isOpen = $state(false);
+  let route = $derived(page.url.pathname);
+  $effect(() => {
+    route; // track dependency
+    isOpen = false;
+  });
 </script>
 
 <header>
   <div class="logo">
     <MediaQuery query="(max-width: 768px)" let:matches>
-      {@const configs = configsFor(matches)}
       <a href={resolve('/')}>
         <img
-          src={configs.src}
+          src={logo}
           alt="Embroidery viewer logo"
-          width={configs.width}
-          height={configs.height}
+          width="150"
+          height={matches ? 70 : 100}
         />
       </a>
     </MediaQuery>
   </div>
 
-  <div class="nav-container">
-    <MediaQuery query="(max-width: 768px)" let:matches>
-      <slot let-matches>
-        {#if matches}
-          <button class="hamburger" onclick={() => (isMenuOpen = !isMenuOpen)}>
-            {#if isMenuOpen}x{:else}☰{/if}
-          </button>
-        {/if}
-      </slot>
-    </MediaQuery>
-    <nav class:is-open={isMenuOpen}>
-      <ul>
-        <li>
-          <a href={resolve('/')}>{$t('header.homeNav')}</a>
-        </li>
-        <li>
-          <a href={resolve('/viewer')}>{$t('header.viewerNav')}</a>
-        </li>
-        <li>
-          <a href={resolve('/about')}>{$t('header.aboutNav')}</a>
-        </li>
-        <li>
-          <a href={resolve('/donate')}>{$t('header.donateNav')}</a>
-        </li>
-      </ul>
-    </nav>
+  <nav class:active={route !== '/'} id="menuToggle">
+    <input type="checkbox" bind:checked={isOpen} />
+    <span></span>
+    <span></span>
+    <span></span>
 
-    <button
-      type="button"
-      class="common-switch {$locale === SUPPORTED_LOCALES.EN_US
-        ? 'portuguese-switch'
-        : 'english-switch'}"
-      onclick={onSwitchToOppositeLang}
-      onkeydown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          onSwitchToOppositeLang(e);
-        }
-      }}
-    >
-      <div style="display: flex; width: fit-content;">
-        <span style="font-size: 20px;">{$t('header.languageSwitch')}</span>
-      </div>
-    </button>
-  </div>
+    <ul id="menu">
+      <a href={resolve('/about')}><li>About</li></a>
+      <a href={resolve('/viewer')}><li>Viewer</li></a>
+      <a href={resolve('/donate')}><li>Donate</li></a>
+    </ul>
+  </nav>
 </header>
 
 <style>
@@ -102,10 +48,14 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 300px 10px 100px;
+    padding: 10px 30px 10px 100px;
     width: 100%;
   }
 
+  .logo {
+    z-index: -1;
+  }
+
   .logo img {
     height: auto;
     max-height: 60px;
@@ -118,112 +68,159 @@
   .logo a:hover {
     background: transparent;
   }
-
-  .nav-container {
+  #menuToggle {
+    position: relative;
     display: flex;
-    gap: 20px;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  /* Click area */
+  #menuToggle input {
+    display: block;
+    width: 40px;
+    height: 32px;
+    position: absolute;
+    top: -7px;
+    left: -5px;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 2;
+  }
+
+  /* Bars */
+  #menuToggle span {
+    display: block;
+    width: 30px;
+    height: 3px;
+    margin-bottom: 7px;
+    background: #ffffff;
+    border-radius: 2px;
+    transition: all 0.35s ease;
+    transform-origin: 4px 0px;
+  }
+
+  /* Adjust origins for rotation */
+  #menuToggle span:nth-child(2) {
+    transform-origin: 0% 0%;
+    width: 20px;
+  }
+
+  #menuToggle span:nth-child(4) {
+    transform-origin: 0% 100%;
+    width: 20px;
+  }
+
+  /* === ANIMATION === */
+
+  /* Top bar → rotates */
+  #menuToggle input:checked ~ span:nth-child(2) {
+    transform: rotate(45deg) translate(-1px, -1px);
+    width: 30px;
+  }
+
+  /* Middle bar → fades out */
+  #menuToggle input:checked ~ span:nth-child(3) {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+
+  /* Bottom bar → rotates opposite */
+  #menuToggle input:checked ~ span:nth-child(4) {
+    transform: rotate(-45deg) translate(1px, -1px);
+    width: 30px;
+  }
+
+  #menu {
+    display: flex;
+    justify-content: center;
     align-items: center;
+    flex-direction: column;
+    position: absolute;
+    top: -80px;
+    width: 400px;
+    margin: -100px 0 0 0;
+    padding: 50px;
+    padding-top: 125px;
+    right: -100px;
+    background: var(--color-primary);
+    list-style-type: none;
+    -webkit-font-smoothing: antialiased;
+    transform-origin: 0% 0%;
+    transform: translate(100%, 0);
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
+    z-index: -1;
+
+    margin: 30px;
+    border-radius: 70% 30% 30% 70% / 60% 40% 0 100%;
+    box-shadow:
+      0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+      0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+      0 12.5px 10px rgba(0, 0, 0, 0.035),
+      0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+      0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+      0 100px 80px rgba(0, 0, 0, 0.07);
   }
 
-  nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 20px;
+  #menu li {
+    padding: 10px 0;
+    font-size: 22px;
+    color: white;
   }
 
-  nav ul li {
-    display: flex;
-    font-weight: bold;
+  #menu li:hover {
+    color: #adadad;
+    transition: all 0.5s ease;
   }
 
-  .hamburger {
-    background: none;
-    border: none;
-    font-size: 35px;
-    width: 35px;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    display: none;
+  #menuToggle input:checked ~ ul {
+    transform: scale(1, 1);
+    opacity: 1;
   }
 
-  .common-switch {
-    border: none;
-    background-color: unset;
-    width: fit-content;
-    cursor: pointer;
+  .active input:checked ~ span:nth-child(2),
+  .active input:checked ~ span:nth-child(3),
+  .active input:checked ~ span:nth-child(4) {
+    background-color: white !important;
   }
 
-  .portuguese-switch {
-    color: #0c8f27;
-    border-bottom: 3px solid #0c8f27 !important;
-    fill: #0c8f27 !important;
+  .active span {
+    background-color: var(--color-primary) !important;
   }
 
-  .portuguese-switch:hover {
-    background: #0c8f27;
-    color: #ffffff;
-    fill: #ffffff !important;
-  }
+  @media (max-width: 1339px) {
+    #menuToggle span {
+      background-color: var(--color-primary);
+    }
+    /* Top bar → rotates */
+    #menuToggle input:checked ~ span:nth-child(2) {
+      background-color: white;
+    }
 
-  .english-switch {
-    color: #be0a2f;
-    border-bottom: 3px solid #be0a2f;
-    width: fit-content;
-    fill: #be0a2f !important;
-  }
+    /* Middle bar → fades out */
+    #menuToggle input:checked ~ span:nth-child(3) {
+      background-color: white;
+    }
 
-  .english-switch:hover {
-    background: #be0a2f;
-    color: #ffffff;
-    fill: #ffffff !important;
+    /* Bottom bar → rotates opposite */
+    #menuToggle input:checked ~ span:nth-child(4) {
+      background-color: white;
+    }
   }
 
   @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%;
-    }
-
-    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;
+    #menu {
+      width: 100vw;
+      top: -80px;
+      margin: 0px 0 0 0;
+      right: -20px;
+      border-radius: 0;
+      border-radius: 0% 0% 80% 80%;
+      transform: translate(0%, -100%);
     }
   }
 </style>
diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css
index 71a074f..b88996e 100644
--- a/src/lib/styles/global.css
+++ b/src/lib/styles/global.css
@@ -14,8 +14,14 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  overflow-x: hidden;
+}
+
 body {
   display: flex;
+  position: relative;
   justify-content: center;
   flex-direction: column;
   margin: 0;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3b39e0a..1047d8d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -36,5 +36,6 @@
     flex: 1; /* This pushes footer to bottom */
     padding: 0;
     min-height: 90vh;
+    overflow-x: hidden;
   }
 </style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 3c372bb..aaf92ba 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -23,6 +23,7 @@
   section {
     width: 70%;
     margin: 0 auto;
+    margin-top: 130px;
   }
 
   h1 {
diff --git a/src/routes/donate/+page.svelte b/src/routes/donate/+page.svelte
index 10e55ff..e4bd60d 100644
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -104,6 +104,7 @@
   .donate-container {
     width: 70%;
     margin: 0 auto;
+    margin-top: 130px;
   }
 
   h1 {
diff --git a/src/routes/privacy-policy/+page.svelte b/src/routes/privacy-policy/+page.svelte
index ebe1355..25fb084 100644
--- a/src/routes/privacy-policy/+page.svelte
+++ b/src/routes/privacy-policy/+page.svelte
@@ -23,6 +23,7 @@
   section {
     width: 70%;
     margin: 0 auto;
+    margin-top: 130px;
   }
   h2 {
     font-size: 17px;
diff --git a/src/routes/terms-of-service/+page.svelte b/src/routes/terms-of-service/+page.svelte
index de81e5f..720460c 100644
--- a/src/routes/terms-of-service/+page.svelte
+++ b/src/routes/terms-of-service/+page.svelte
@@ -23,6 +23,7 @@
   section {
     width: 70%;
     margin: 0 auto;
+    margin-top: 130px;
   }
   h2 {
     font-size: 17px;
diff --git a/src/routes/viewer/+page.svelte b/src/routes/viewer/+page.svelte
index 6e32e4a..45e997c 100644
--- a/src/routes/viewer/+page.svelte
+++ b/src/routes/viewer/+page.svelte
@@ -130,6 +130,7 @@
   form {
     width: fit-content;
     margin: 0 auto;
+    margin-top: 130px;
   }
 
   .title-container {
