fix: redirect to same page on language change (#188)

* chore: language selector now is pretty * fix: redirect to exact page on lang change * fix: eslint
chat-game · Jun 30, 2024 · 5bad9fb · 5bad9fb
1 parent 373de0c
commit 5bad9fb
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 32 deletions.
diff --git a/src/lib/components/Hamburger.svelte b/src/lib/components/Hamburger.svelte
@@ -5,7 +5,7 @@
 <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='middle' x1='0' y1='12' x2='32' y2='12' />
     <line id='bottom' x1='0' y1='22' x2='32' y2='22' />
   </svg>
 </button>

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -42,6 +42,12 @@
         align-items: center;
     }
 
+    @media (max-width: 768px) {
+      header {
+        padding: 0.5em 0.5em;
+      }
+    }
+
     .left {
         flex-grow: 1;
         flex-basis: 0;
@@ -68,6 +74,10 @@
         transition: all 0.2s;
     }
 
+    .logo a {
+      font-size: 0;
+    }
+
     .logo a:hover img {
         animation-name: skewRandom;
         animation-duration: 0.5s;

diff --git a/src/lib/components/Locale.svelte b/src/lib/components/Locale.svelte
@@ -1,24 +1,73 @@
 <script lang='ts'>
+  import Globe from 'lucide-svelte/icons/globe'
   import { page } from '$app/stores'
-  import { supportedLocales } from '$lib/translations'
+  import { type Locale, supportedLocales } from '$lib/translations'
 
-  const locale = $page.data.locale
-  let selected = locale
+  const dictionary = {
+    ru: {
+      short: 'Рус',
+      long: 'Русский',
+    },
+    en: {
+      short: 'Eng',
+      long: 'English',
+    },
+  }
+
+  const locale = $page.data.locale as Locale
+  const redirectUrl = $derived($page.url.pathname.substring(3))
+
+  let isOpened = $state(false)
 
-  const handleChange = ({ currentTarget }: { currentTarget: HTMLSelectElement }) => {
-    const { value } = currentTarget
-    window.location.href = `/${value}`
+  const onfocusout = ({ relatedTarget, currentTarget }: { relatedTarget: EventTarget | null, currentTarget: HTMLElement }) => {
+    if (relatedTarget instanceof HTMLElement && currentTarget.contains(relatedTarget)) {
+      return
+    }
+
+    isOpened = false
   }
 </script>
 
-<select bind:value={selected} onchange={handleChange}>
-  {#each supportedLocales as value}
-    <option value={value} selected={selected === value}>{value}</option>
-  {/each}
-</select>
+<div class='block' {onfocusout}>
+  <button class='select-lang' onclick={() => isOpened = !isOpened}>
+    <div class='icon'>
+      <Globe />
+    </div>
+    <span>{dictionary[locale].short}</span>
+  </button>
+
+  {#if isOpened}
+    <div class='dropdown-menu'>
+      {#each supportedLocales as locale}
+        <button onclick={() => window.location.href = `/${locale}${redirectUrl}`}>{dictionary[locale].long}</button>
+      {/each}
+    </div>
+  {/if}
+</div>
 
 <style>
-  select {
-    margin: 0;
+  .block {
+    position: relative;
+  }
+
+  .select-lang {
+    padding: 0.25em 0.35em 0.25em 0.25em;
+    background-color: var(--color-background-2);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25em;
+    cursor: pointer;
+    border: 0;
+    transition: color 0.2s;
+  }
+
+  .select-lang:hover {
+    color: var(--color-bg-accent-2)
+  }
+
+  .select-lang .icon {
+    pointer-events: none;
+    height: 24px;
   }
 </style>
diff --git a/src/lib/components/MenuDesktop.svelte b/src/lib/components/MenuDesktop.svelte
@@ -48,7 +48,7 @@
         text-transform: uppercase;
         letter-spacing: 0;
         text-decoration: none;
-        transition: color 0.2s linear;
+        transition: color 0.2s;
     }
 
     nav a:hover {

diff --git a/src/lib/components/Profile.svelte b/src/lib/components/Profile.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang='ts'>
   import { page } from '$app/stores'
   import twitchIcon from '$lib/assets/website/icons/twitch/112.png'
   import { config } from '$lib/config'
@@ -25,20 +25,26 @@
   const handleMenuClick = () => {
     menuOpened = !menuOpened
   }
+
+  const onfocusout = ({ relatedTarget, currentTarget }: { relatedTarget: EventTarget | null, currentTarget: HTMLElement }) => {
+    if (relatedTarget instanceof HTMLElement && currentTarget.contains(relatedTarget)) {
+      return
+    }
+
+    menuOpened = false
+  }
 </script>
 
-<div class='wrapper'>
+<div class='wrapper' {onfocusout}>
   {#if isSignedIn}
-    <button class='profile-avatar' on:click={handleMenuClick}>
+    <button class='profile-avatar' onclick={handleMenuClick}>
       <img src={twitchIcon} alt="" />
     </button>
     {#if menuOpened}
-      <div class='profile-menu'>
-        <div>
-          <a href='/{$page.data.locale}/p/{$page.data.profile.userName}'>{$page.data.profile.userName}</a>
-          <a href='/{$page.data.locale}/play'>Играть</a>
-        </div>
-        <button on:click={handleSignOut}>Выйти</button>
+      <div class='dropdown-menu position-left'>
+        <a href='/{$page.data.locale}/p/{$page.data.profile.userName}'>Профиль</a>
+        <a href='/{$page.data.locale}/play'>Играть</a>
+        <button onclick={handleSignOut}>Выйти</button>
       </div>
     {/if}
   {:else}
@@ -85,12 +91,7 @@
         height: auto;
     }
 
-    .profile-menu {
-        position: absolute;
-        top: calc(58px + 4px);
-        right: 0;
-        padding: 4px 8px;
-        background-color: var(--color-background);
-        border: 2px solid var(--color-border);
+    .position-left {
+      right: 0;
     }
 </style>
diff --git a/src/lib/styles/styles.css b/src/lib/styles/styles.css
@@ -5,6 +5,7 @@
     --color-text: #331E0B;
     --color-twitch: #8E4EC6;
     --color-background: #FFF7ED;
+    --color-background-2: #F6EEE7;
     --color-border: #DCBC9F;
     --color-border-2: #E1DCCF;
     --color-bg-accent-1: #56468B;
@@ -126,3 +127,24 @@ button:focus:not(:focus-visible) {
     background-position: bottom;
     background-size: cover;
 }
+
+.dropdown-menu {
+    position: absolute;
+    bottom: -0.25em;
+    transform: translateY(100%);
+    padding: 0.5em;
+    background-color: var(--color-background-2);
+  }
+
+  .dropdown-menu button:not(:last-child), .dropdown-menu a:not(:last-child) {
+    margin-bottom: 0.25em;
+  }
+
+  .dropdown-menu a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .dropdown-menu button:hover, .dropdown-menu a:hover {
+    color: var(--color-accent-1);
+  }
diff --git a/src/routes/[lang]/(website)/character/[id]/+page.svelte b/src/routes/[lang]/(website)/character/[id]/+page.svelte
@@ -230,7 +230,7 @@
     .post .avatar {
       height: 48px;
       width: 48px;
-      background-color: #EAE6DB;
+      background-color: var(--color-background-2);
       padding: 0.2em;
       margin-right: 1em;
       position: relative;