Add turkey and italian language

src/components/Sidebar/Sidebar.svelte

@@ -28,6 +28,8 @@
     { id: 'es', label: 'Español' },
     { id: 'pt', label: 'Português' },
     { id: 'ru', label: 'Русский' },
+    { id: 'tr', label: 'Türkçe' },
+    { id: 'it', label: 'Italiano' },
   ];
   $: currentLocale =
     $locale !== null ? languages.find((e) => e.id === $locale.substring(0, 2)) || { id: 'en', label: 'English' } : '';
@@ -148,17 +150,18 @@
     >
       <img class="w-4 h-4 rounded-full mr-2" alt={currentLocale.label} src="/images/locales/{currentLocale.id}.svg" />
       <span class="text-gray-400">{currentLocale.label}</span>
-      <div class="locale-dropdown" style="top: {locales.length * -45}px;">
-        {#each locales as locale}
-          <div
-            class="flex items-center justify-center py-2 cursor-pointer rounded-xl bg-black hover:bg-gray-900"
-            on:click={() => changeLocale(locale.id)}
-          >
-            <img class="w-4 h-4 rounded-full mr-2" alt={locale.label} src="/images/locales/{locale.id}.svg" />
-            <span class="text-gray-400">{locale.label}</span>
-          </div>
-          <div class="w-40" style="height: 5px;" />
-        {/each}
+      <div class="locale-dropdown">
+        <div class="bg-black grid grid-cols-2 rounded-xl overflow-hidden">
+          {#each locales as locale}
+            <div
+              class="flex items-center justify-center py-2 cursor-pointer hover:bg-gray-900"
+              on:click={() => changeLocale(locale.id)}
+            >
+              <img class="w-4 h-4 rounded-full mr-2" alt={locale.label} src="/images/locales/{locale.id}.svg" />
+              <span class="text-gray-400">{locale.label}</span>
+            </div>
+          {/each}
+        </div>
       </div>
     </div>
   </div>
@@ -178,9 +181,7 @@
   }
 
   .locale-dropdown {
-    @apply hidden;
-    @apply absolute;
-    @apply w-40;
+    @apply hidden absolute w-80 -left-20 md:left-0 pb-2 bottom-10;
   }
 
   .locale-selector:hover {

src/i18n.js

@@ -21,7 +21,7 @@ $locale.subscribe((value) => {
   }
 });
 
-const supportedLanguage = ['en', 'id', 'ru', 'ja', 'ko', 'fr', 'zh', 'pt', 'tw', 'es', 'de', 'th', 'vi'];
+const supportedLanguage = ['en', 'id', 'ru', 'ja', 'ko', 'fr', 'zh', 'pt', 'tw', 'es', 'de', 'th', 'vi', 'tr', 'it'];
 addMessages('en', en);
 addMessages('en', enItems);
 register('id', () => import('./locales/id.json'));
@@ -36,6 +36,8 @@ register('es', () => import('./locales/es.json'));
 register('de', () => import('./locales/de.json'));
 register('th', () => import('./locales/th.json'));
 register('vi', () => import('./locales/vi.json'));
+register('tr', () => import('./locales/en.json'));
+register('it', () => import('./locales/en.json'));
 register('id', () => import('./locales/items/id.json'));
 register('ru', () => import('./locales/items/ru.json'));
 register('ja', () => import('./locales/items/ja.json'));
@@ -48,6 +50,8 @@ register('es', () => import('./locales/items/es.json'));
 register('de', () => import('./locales/items/de.json'));
 register('th', () => import('./locales/items/th.json'));
 register('vi', () => import('./locales/items/vi.json'));
+register('tr', () => import('./locales/items/en.json'));
+register('it', () => import('./locales/items/en.json'));
 
 const dayjsLocales = {
   en: () => import('dayjs/locale/en'),
@@ -63,6 +67,8 @@ const dayjsLocales = {
   de: () => import('dayjs/locale/de'),
   th: () => import('dayjs/locale/th'),
   vi: () => import('dayjs/locale/vi'),
+  tr: () => import('dayjs/locale/tr'),
+  it: () => import('dayjs/locale/it'),
 };
 
 export async function startClient() {

static/images/locales/it.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 512 512">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h512v512H0z"/>
+    <path fill="#009246" d="M0 0h170.7v512H0z"/>
+    <path fill="#ce2b37" d="M341.3 0H512v512H341.3z"/>
+  </g>
+</svg>

static/images/locales/tr.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-tr" viewBox="0 0 512 512">
+  <g fill-rule="evenodd">
+    <path fill="#e30a17" d="M0 0h512v512H0z"/>
+    <path fill="#fff" d="M348.8 264c0 70.6-58.3 127.9-130.1 127.9s-130.1-57.3-130.1-128 58.2-127.8 130-127.8S348.9 193.3 348.9 264z"/>
+    <path fill="#e30a17" d="M355.3 264c0 56.5-46.6 102.3-104.1 102.3s-104-45.8-104-102.3 46.5-102.3 104-102.3 104 45.8 104 102.3z"/>
+    <path fill="#fff" d="m374.1 204.2-1 47.3-44.2 12 43.5 15.5-1 43.3 28.3-33.8 42.9 14.8-24.8-36.3 30.2-36.1-46.4 12.8-27.5-39.5z"/>
+  </g>
+</svg>