Merge pull request #13 from Craftserve/rozwader/switch-languages

feature: added button for switching languages

Author: JakubLobos

src/i18n/ui.ts

@@ -1,5 +1,10 @@
 export const defaultLang = "pl-PL";
 
+export const langs = [
+    "en",
+    "pl-PL",
+]
+
 export const ui = {
     "en": {
         "example": "test",
@@ -11,6 +16,7 @@ export const ui = {
         "header": "Today is your| day to grow| in ideas.",
 
         "aboutUrl": "about",
+        "language": "EN",
         "contactUrl": "#formSection",
 
         "name": "Name",
@@ -35,6 +41,7 @@ export const ui = {
         "header": "Dziś jest Twój| dzień, aby urosnąć| w ideach.",
 
         "aboutUrl": "o-nas",
+        "language": "PL",
         "contactUrl": "#formSection",
 
         "name": "Imię",

src/layouts/Layout.astro

@@ -29,15 +29,15 @@ import Navbar from "../sections/Navbar.astro";
             import { getLangForRedirect } from "../i18n/utils";
             const lang = getLangForRedirect(new URL(window.location.href));
 
-            const userLang = navigator.language || "pl";
+            const userLang = localStorage.getItem("lang") || navigator.language || "pl";
 
             if (!userLang.startsWith("pl") && lang !== "en") {
-                const meta = document.createElement("meta");
-                meta.httpEquiv = "refresh";
-                meta.content = "0;url=/en/";
-                document.head.appendChild(meta);
+              const meta = document.createElement("meta");
+              meta.httpEquiv = "refresh";
+              meta.content = `0;url=/en/`;
+              document.head.appendChild(meta);
             }
-        </script>
+      </script>
     </body>
 </html>
 

src/scripts/NavbarScripts.js

@@ -1,4 +1,5 @@
-import { getLangFromUrl } from "../i18n/utils";
+import { langs } from "../i18n/ui";
+import { getLangForRedirect, getLangFromUrl } from "../i18n/utils";
 
 document.getElementsByClassName("hamburger-button")[0].addEventListener("click", () => {
     document.getElementsByClassName("hamburger-menu")[0].classList.toggle("hamburger-menu-open");
@@ -14,3 +15,23 @@ document.getElementsByClassName("logoContainer")[0].addEventListener("click", ()
 
     window.location.assign(`/`);
 });
+
+document.getElementById("langSwitch").addEventListener("click", () => {
+    const lang = getLangFromUrl(new URL(window.location.href));
+    const currentLangIndex = langs.indexOf(lang);
+
+    const nextLang = langs[(currentLangIndex + 1) % langs.length];
+    const targetUrl = nextLang.startsWith("pl") ? "/" : `/${nextLang}/`;
+
+    const meta = document.createElement("meta");
+    meta.httpEquiv = "refresh";
+    meta.content = `0;url=${targetUrl}`;
+
+    if (!nextLang.startsWith("pl")) {
+        localStorage.setItem("lang", "en-US");
+    }else{
+        localStorage.setItem("lang", "pl-PL");
+    }
+    
+    document.head.appendChild(meta);
+})

src/sections/Navbar.astro

@@ -5,6 +5,9 @@ import { getLangFromUrl, getRoutes, useTranslations } from "../i18n/utils";
 import Link from "../components/Link.astro";
 import { Icon } from "astro-icon/components";
 
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
 const routes = getRoutes(Astro.url);
 ---
 
@@ -14,17 +17,16 @@ const routes = getRoutes(Astro.url);
             <Image src={LogoDark} alt="Logo" width={40} height={40}/>
             <h1 style="font-weight: 700; font-size: medium;">Vitresoft</h1>
         </button>
+    
 
         <div class="hamburger-menu">
-            {
-                routes.map((route) => {
-                    return (
-                        <Link variant="blank" href={route.url}>
-                            {route.name}
-                        </Link>
-                    );
-                })
-            }
+            {routes.map((route) => {
+                return <Link variant="blank" href={route.url}>{route.name}</Link>
+            })}
+            <button class="languageSection" id="langSwitch">
+                <span style="font-weight: 700;">{t("language")}</span>
+                <Icon name="uil:globe" width={25} height={25} />
+            </button>
         </div>
         <button type="button" class="hamburger-button">
             <Icon class="hamburger-icon" name="tabler:menu-2" />
@@ -50,7 +52,20 @@ const routes = getRoutes(Astro.url);
         justify-content: space-between;
     }
 
-    .logoContainer {
+    .languageSection{
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        border: 2px solid var(--primary);
+        color: var(--primary);
+        border-radius: 8px;
+        padding: 5px 14px;
+    }
+
+    .logoContainer{
         display: flex;
         flex-direction: row;
         align-items: center;