From e857eb43f16286901b2be712bba0b9caaeb1ee61 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Fri, 28 Jun 2024 17:01:59 +0000
Subject: [PATCH 1/2] feat: hamburger with sidebar menu on smartphone

---
 src/lib/components/Hamburger.svelte      | 63 +++++++++++++++++
 src/lib/components/Header.svelte         | 88 +++++-------------------
 src/lib/components/Locale.svelte         |  2 +-
 src/lib/components/MenuDesktop.svelte    | 79 +++++++++++++++++++++
 src/lib/components/MenuSmartphone.svelte | 83 ++++++++++++++++++++++
 5 files changed, 244 insertions(+), 71 deletions(-)
 create mode 100644 src/lib/components/Hamburger.svelte
 create mode 100644 src/lib/components/MenuDesktop.svelte
 create mode 100644 src/lib/components/MenuSmartphone.svelte

diff --git a/src/lib/components/Hamburger.svelte b/src/lib/components/Hamburger.svelte
new file mode 100644
index 00000000..e84ef9a7
--- /dev/null
+++ b/src/lib/components/Hamburger.svelte
@@ -0,0 +1,63 @@
+<script>
+	export let open = false
+</script>
+
+<button class="burger" class:open onclick={() => open = !open}>
+	<svg width=32 height=24>
+		<line id="top" x1=0 y1=2  x2=32 y2=2/>
+		<line id="middle" x1=0 y1=12 x2=24 y2=12/>
+		<line id="bottom" x1=0 y1=22 x2=32 y2=22/>
+	</svg>
+</button>
+
+<style>
+    .burger {
+        position: relative;
+        width: 48px;
+        height: 24px;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+	svg {
+		min-height: 24px;
+		transition: transform 0.2s ease-in-out;
+        color: var(--color-text);
+	}
+	
+	svg line {
+		stroke: currentColor;
+		stroke-width: 3;
+		transition: transform 0.2s ease-in-out
+	}
+	
+	button {
+		z-index: 10;
+	}
+	
+	.open svg {
+        color: var(--color-border);
+	}
+	
+	.open #top {
+		transform: translate(6px, 0px) rotate(45deg)
+	}
+	
+	.open #middle {
+		opacity: 0;
+	}
+	
+  .open #bottom {
+		transform: translate(-12px, 9px) rotate(-45deg)
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 988d9aaf..56c2e01f 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,13 +1,18 @@
 <script lang='ts'>
   import { page } from '$app/stores'
   import unit from '$lib/assets/website/unit-64.png'
-  import Profile from '$lib/components/Profile.svelte'
-  import Locale from '$lib/components/Locale.svelte'
+    import MenuSmartphone from './MenuSmartphone.svelte';
+    import MenuDesktop from './MenuDesktop.svelte';
+    import Locale from './Locale.svelte';
 
   const locale = $page.data.locale
-  const t = $page.data.t
+
+  let innerWidth = 0
+  let open = false
 </script>
 
+<svelte:window bind:innerWidth />
+
 <header>
   <div class='left logo'>
     {#if $page.url.pathname === `/${locale}`}
@@ -17,30 +22,15 @@
         <img src={unit} alt="" />
       </a>
     {/if}
-  </div>
-
-  <nav>
-    <ul>
-      <li aria-current={$page.url.pathname === `/${locale}` ? 'page' : undefined}>
-        <a href='/{locale}'>{t.header.menu.home}</a>
-      </li>
-      <li aria-current={$page.url.pathname === `/${locale}/about` ? 'page' : undefined}>
-        <a href='/{locale}/about'>{t.header.menu.about}</a>
-      </li>
-      <li aria-current={$page.url.pathname === `/${locale}/character` ? 'page' : undefined}>
-        <a href='/{locale}/character'>{t.header.menu.characters}</a>
-      </li>
-      <li aria-current={$page.url.pathname === `/${locale}/coupon` ? 'page' : undefined}>
-        <a href='/{locale}/coupon'>{t.header.menu.coupon}</a>
-      </li>
-    </ul>
-  </nav>
 
-  <Locale />
-
-  <div class='right'>
-    <Profile />
+    <Locale />
   </div>
+
+  {#if innerWidth < 768}
+    <MenuSmartphone bind:sidebar={open} />
+  {:else}
+    <MenuDesktop />
+  {/if}
 </header>
 
 <style>
@@ -52,9 +42,11 @@
         align-items: center;
     }
 
-    .left, .right {
+    .left {
         flex-grow: 1;
         flex-basis: 0;
+        display: flex;
+        align-items: center;
     }
 
     @keyframes skewRandom {
@@ -84,48 +76,4 @@
         animation-direction: alternate-reverse;
         transform-origin: 50% 50%;
     }
-
-    nav {
-        display: flex;
-        justify-content: center;
-    }
-
-    nav a {
-        display: flex;
-        height: 100%;
-        align-items: center;
-        color: var(--color-text);
-        font-weight: 700;
-        font-size: 1rem;
-        text-transform: uppercase;
-        letter-spacing: 0;
-        text-decoration: none;
-        transition: color 0.2s linear;
-    }
-
-    nav a:hover {
-        color: var(--color-accent-1);
-    }
-
-    ul {
-        position: relative;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 1.2em;
-        list-style: none;
-    }
-
-    li {
-        position: relative;
-        display: flex;
-        gap: 0.2em;
-        height: 100%;
-    }
-
-    li[aria-current='page'] a {
-        color: var(--color-accent-1);
-    }
 </style>
diff --git a/src/lib/components/Locale.svelte b/src/lib/components/Locale.svelte
index efa1e6b7..d5274696 100644
--- a/src/lib/components/Locale.svelte
+++ b/src/lib/components/Locale.svelte
@@ -19,6 +19,6 @@
 
 <style>
   select {
-    margin: 0 2em;
+    margin: 0;
   }
 </style>
diff --git a/src/lib/components/MenuDesktop.svelte b/src/lib/components/MenuDesktop.svelte
new file mode 100644
index 00000000..7cd19470
--- /dev/null
+++ b/src/lib/components/MenuDesktop.svelte
@@ -0,0 +1,79 @@
+<script>
+    import { page } from '$app/stores'
+    import Profile from "./Profile.svelte"
+
+    const locale = $page.data.locale
+    const t = $page.data.t
+</script>
+
+<nav>
+    <ul>
+      <li aria-current={$page.url.pathname === `/${locale}` ? 'page' : undefined}>
+        <a href='/{locale}'>{t.header.menu.home}</a>
+      </li>
+      <li aria-current={$page.url.pathname === `/${locale}/about` ? 'page' : undefined}>
+        <a href='/{locale}/about'>{t.header.menu.about}</a>
+      </li>
+      <li aria-current={$page.url.pathname === `/${locale}/character` ? 'page' : undefined}>
+        <a href='/{locale}/character'>{t.header.menu.characters}</a>
+      </li>
+      <li aria-current={$page.url.pathname === `/${locale}/coupon` ? 'page' : undefined}>
+        <a href='/{locale}/coupon'>{t.header.menu.coupon}</a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class='right'>
+    <Profile />
+  </div>
+
+  <style>
+    .right {
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    nav {
+        display: flex;
+        justify-content: center;
+    }
+
+    nav a {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        color: var(--color-text);
+        font-weight: 700;
+        font-size: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 0;
+        text-decoration: none;
+        transition: color 0.2s linear;
+    }
+
+    nav a:hover {
+        color: var(--color-accent-1);
+    }
+
+    ul {
+        position: relative;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1.2em;
+        list-style: none;
+    }
+
+    li {
+        position: relative;
+        display: flex;
+        gap: 0.2em;
+        height: 100%;
+    }
+
+    li[aria-current='page'] a {
+        color: var(--color-accent-1);
+    }
+  </style>
\ No newline at end of file
diff --git a/src/lib/components/MenuSmartphone.svelte b/src/lib/components/MenuSmartphone.svelte
new file mode 100644
index 00000000..4aa9a535
--- /dev/null
+++ b/src/lib/components/MenuSmartphone.svelte
@@ -0,0 +1,83 @@
+<script>
+    import { page } from '$app/stores'
+    import Hamburger from './Hamburger.svelte';
+    import Profile from "./Profile.svelte"
+
+    const locale = $page.data.locale
+    const t = $page.data.t
+
+    export let sidebar = false
+
+    function closeSidebar() {
+        sidebar = false
+    }
+</script>
+
+<aside class:open={sidebar}>
+<nav>
+    <ul>
+      <li aria-current={$page.url.pathname === `/${locale}` ? 'page' : undefined}>
+        <a href='/{locale}' onclick={closeSidebar}>{t.header.menu.home}</a>
+      </li>
+      <li aria-current={$page.url.pathname === `/${locale}/about` ? 'page' : undefined}>
+        <a href='/{locale}/about' onclick={closeSidebar}>{t.header.menu.about}</a>
+      </li>
+      <li aria-current={$page.url.pathname === `/${locale}/character` ? 'page' : undefined}>
+        <a href='/{locale}/character' onclick={closeSidebar}>{t.header.menu.characters}</a>
+      </li>
+      <li aria-current={$page.url.pathname === `/${locale}/coupon` ? 'page' : undefined}>
+        <a href='/{locale}/coupon' onclick={closeSidebar}>{t.header.menu.coupon}</a>
+      </li>
+    </ul>
+  </nav>
+</aside>
+
+  <div class='profile-block'>
+    <Profile />
+  </div>
+
+  <Hamburger bind:open={sidebar}/>
+
+  <style>
+	aside {
+		left: -100%;
+		transition: left 0.2s ease-in-out;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100vh;
+        background-color: var(--color-bg-accent-1);
+        z-index: 10;
+	}
+
+    nav {
+        padding: 0 2em;
+    }
+
+    nav ul {
+        padding: 0;
+    }
+
+    nav ul li {
+        list-style: none;
+        font-size: 1.5rem;
+        padding: 0.25em 0;
+    }
+
+    nav ul li a {
+        color: #fff;
+    }
+
+    li[aria-current='page'] a {
+        color: var(--color-border);
+    }
+	
+	.open {
+		left: 0
+	}
+
+    .profile-block {
+        margin-right: 0.5em;
+    }
+</style>
\ No newline at end of file

From b0535b76876deb12bb6b81ac9bdfef2f558a0af7 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Fri, 28 Jun 2024 17:12:04 +0000
Subject: [PATCH 2/2] fix: flex on coupon page

---
 src/lib/components/Hamburger.svelte           | 114 +++++++++---------
 src/lib/components/Header.svelte              |   8 +-
 src/lib/components/MenuDesktop.svelte         |  48 ++++----
 src/lib/components/MenuSmartphone.svelte      | 102 ++++++++--------
 .../[lang]/(website)/coupon/+page.svelte      |   8 ++
 5 files changed, 144 insertions(+), 136 deletions(-)

diff --git a/src/lib/components/Hamburger.svelte b/src/lib/components/Hamburger.svelte
index e84ef9a7..54801a23 100644
--- a/src/lib/components/Hamburger.svelte
+++ b/src/lib/components/Hamburger.svelte
@@ -1,63 +1,63 @@
 <script>
-	export let open = false
+  export let open = false
 </script>
 
-<button class="burger" class:open onclick={() => open = !open}>
-	<svg width=32 height=24>
-		<line id="top" x1=0 y1=2  x2=32 y2=2/>
-		<line id="middle" x1=0 y1=12 x2=24 y2=12/>
-		<line id="bottom" x1=0 y1=22 x2=32 y2=22/>
-	</svg>
+<button class='burger' class:open onclick={() => open = !open}>
+  <svg width='32' height='24'>
+    <line id='top' x1='0' y1='2' x2='32' y2='2' />
+    <line id='middle' x1='0' y1='12' x2='24' y2='12' />
+    <line id='bottom' x1='0' y1='22' x2='32' y2='22' />
+  </svg>
 </button>
 
 <style>
-    .burger {
-        position: relative;
-        width: 48px;
-        height: 24px;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        background-color: transparent;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-	svg {
-		min-height: 24px;
-		transition: transform 0.2s ease-in-out;
-        color: var(--color-text);
-	}
-	
-	svg line {
-		stroke: currentColor;
-		stroke-width: 3;
-		transition: transform 0.2s ease-in-out
-	}
-	
-	button {
-		z-index: 10;
-	}
-	
-	.open svg {
-        color: var(--color-border);
-	}
-	
-	.open #top {
-		transform: translate(6px, 0px) rotate(45deg)
-	}
-	
-	.open #middle {
-		opacity: 0;
-	}
-	
-  .open #bottom {
-		transform: translate(-12px, 9px) rotate(-45deg)
-	}
-</style>
\ No newline at end of file
+.burger {
+    position: relative;
+    width: 48px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+svg {
+    min-height: 24px;
+    transition: transform 0.2s ease-in-out;
+    color: var(--color-text);
+}
+
+svg line {
+    stroke: currentColor;
+    stroke-width: 3;
+    transition: transform 0.2s ease-in-out
+}
+
+button {
+    z-index: 10;
+}
+
+.open svg {
+    color: var(--color-border);
+}
+
+.open #top {
+    transform: translate(6px, 0px) rotate(45deg)
+}
+
+.open #middle {
+    opacity: 0;
+}
+
+.open #bottom {
+    transform: translate(-12px, 9px) rotate(-45deg)
+}
+</style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 56c2e01f..478a0460 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,9 +1,9 @@
 <script lang='ts'>
-  import { page } from '$app/stores'
+  import MenuSmartphone from './MenuSmartphone.svelte'
+  import MenuDesktop from './MenuDesktop.svelte'
+  import Locale from './Locale.svelte'
   import unit from '$lib/assets/website/unit-64.png'
-    import MenuSmartphone from './MenuSmartphone.svelte';
-    import MenuDesktop from './MenuDesktop.svelte';
-    import Locale from './Locale.svelte';
+  import { page } from '$app/stores'
 
   const locale = $page.data.locale
 
diff --git a/src/lib/components/MenuDesktop.svelte b/src/lib/components/MenuDesktop.svelte
index 7cd19470..31736b78 100644
--- a/src/lib/components/MenuDesktop.svelte
+++ b/src/lib/components/MenuDesktop.svelte
@@ -1,33 +1,33 @@
 <script>
-    import { page } from '$app/stores'
-    import Profile from "./Profile.svelte"
+  import Profile from './Profile.svelte'
+  import { page } from '$app/stores'
 
-    const locale = $page.data.locale
-    const t = $page.data.t
+  const locale = $page.data.locale
+  const t = $page.data.t
 </script>
 
 <nav>
-    <ul>
-      <li aria-current={$page.url.pathname === `/${locale}` ? 'page' : undefined}>
-        <a href='/{locale}'>{t.header.menu.home}</a>
-      </li>
-      <li aria-current={$page.url.pathname === `/${locale}/about` ? 'page' : undefined}>
-        <a href='/{locale}/about'>{t.header.menu.about}</a>
-      </li>
-      <li aria-current={$page.url.pathname === `/${locale}/character` ? 'page' : undefined}>
-        <a href='/{locale}/character'>{t.header.menu.characters}</a>
-      </li>
-      <li aria-current={$page.url.pathname === `/${locale}/coupon` ? 'page' : undefined}>
-        <a href='/{locale}/coupon'>{t.header.menu.coupon}</a>
-      </li>
-    </ul>
-  </nav>
+  <ul>
+    <li aria-current={$page.url.pathname === `/${locale}` ? 'page' : undefined}>
+      <a href='/{locale}'>{t.header.menu.home}</a>
+    </li>
+    <li aria-current={$page.url.pathname === `/${locale}/about` ? 'page' : undefined}>
+      <a href='/{locale}/about'>{t.header.menu.about}</a>
+    </li>
+    <li aria-current={$page.url.pathname === `/${locale}/character` ? 'page' : undefined}>
+      <a href='/{locale}/character'>{t.header.menu.characters}</a>
+    </li>
+    <li aria-current={$page.url.pathname === `/${locale}/coupon` ? 'page' : undefined}>
+      <a href='/{locale}/coupon'>{t.header.menu.coupon}</a>
+    </li>
+  </ul>
+</nav>
 
-  <div class='right'>
-    <Profile />
-  </div>
+<div class='right'>
+  <Profile />
+</div>
 
-  <style>
+<style>
     .right {
         flex-grow: 1;
         flex-basis: 0;
@@ -76,4 +76,4 @@
     li[aria-current='page'] a {
         color: var(--color-accent-1);
     }
-  </style>
\ No newline at end of file
+  </style>
diff --git a/src/lib/components/MenuSmartphone.svelte b/src/lib/components/MenuSmartphone.svelte
index 4aa9a535..413295dc 100644
--- a/src/lib/components/MenuSmartphone.svelte
+++ b/src/lib/components/MenuSmartphone.svelte
@@ -1,20 +1,20 @@
 <script>
-    import { page } from '$app/stores'
-    import Hamburger from './Hamburger.svelte';
-    import Profile from "./Profile.svelte"
+  import Hamburger from './Hamburger.svelte'
+  import Profile from './Profile.svelte'
+  import { page } from '$app/stores'
 
-    const locale = $page.data.locale
-    const t = $page.data.t
+  const locale = $page.data.locale
+  const t = $page.data.t
 
-    export let sidebar = false
+  export let sidebar = false
 
-    function closeSidebar() {
-        sidebar = false
-    }
+  function closeSidebar() {
+    sidebar = false
+  }
 </script>
 
 <aside class:open={sidebar}>
-<nav>
+  <nav>
     <ul>
       <li aria-current={$page.url.pathname === `/${locale}` ? 'page' : undefined}>
         <a href='/{locale}' onclick={closeSidebar}>{t.header.menu.home}</a>
@@ -32,52 +32,52 @@
   </nav>
 </aside>
 
-  <div class='profile-block'>
-    <Profile />
-  </div>
+<div class='profile-block'>
+  <Profile />
+</div>
 
-  <Hamburger bind:open={sidebar}/>
+<Hamburger bind:open={sidebar} />
 
-  <style>
-	aside {
-		left: -100%;
-		transition: left 0.2s ease-in-out;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100vh;
-        background-color: var(--color-bg-accent-1);
-        z-index: 10;
-	}
+<style>
+aside {
+    left: -100%;
+    transition: left 0.2s ease-in-out;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: var(--color-bg-accent-1);
+    z-index: 10;
+}
 
-    nav {
-        padding: 0 2em;
-    }
+nav {
+    padding: 0 2em;
+}
 
-    nav ul {
-        padding: 0;
-    }
+nav ul {
+    padding: 0;
+}
 
-    nav ul li {
-        list-style: none;
-        font-size: 1.5rem;
-        padding: 0.25em 0;
-    }
+nav ul li {
+    list-style: none;
+    font-size: 1.5rem;
+    padding: 0.25em 0;
+}
 
-    nav ul li a {
-        color: #fff;
-    }
+nav ul li a {
+    color: #fff;
+}
 
-    li[aria-current='page'] a {
-        color: var(--color-border);
-    }
-	
-	.open {
-		left: 0
-	}
+li[aria-current='page'] a {
+    color: var(--color-border);
+}
 
-    .profile-block {
-        margin-right: 0.5em;
-    }
-</style>
\ No newline at end of file
+.open {
+    left: 0
+}
+
+.profile-block {
+    margin-right: 0.5em;
+}
+</style>
diff --git a/src/routes/[lang]/(website)/coupon/+page.svelte b/src/routes/[lang]/(website)/coupon/+page.svelte
index 8b85fe4c..eeb64266 100644
--- a/src/routes/[lang]/(website)/coupon/+page.svelte
+++ b/src/routes/[lang]/(website)/coupon/+page.svelte
@@ -113,9 +113,17 @@
 
     .latest-coupons .block {
         display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
         gap: 1em;
     }
 
+    @media (max-width: 620px) {
+        .latest-coupons .block {
+            flex-direction: column;
+        }
+  }
+
     .latest-coupons .block .card {
       border: 2px solid var(--color-border-2);
       padding: 1em;