From a5d9eed8434141615a8d52c4630ac3bf53aee86d Mon Sep 17 00:00:00 2001
From: oimwiodev <oimwiodev@outlook.com>
Date: Sat, 16 May 2026 15:03:21 +0100
Subject: [PATCH] Keep language switcher in mobile nav

---
 CHANGELOG.md                    | 1 +
 components/LanguageSwitcher.tsx | 5 +++--
 components/Navbar.tsx           | 6 ++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c07ebff..edc98bd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to the New Optic website will be documented in this file.
 
 - Removed the desktop liquid glass WebGL layer from navbar and CTA controls so text remains readable and glass surfaces do not show dark rendering artifacts while scrolling.
 - Replaced the mobile hamburger dropdown with a fast, solid menu animation without bounce or stretch effects.
+- Kept the language switcher visible in the mobile top navigation bar.
 
 ## [1.0.0] - 2026-05-16
 
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
index 3bcca13..3875e23 100644
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@@ -3,9 +3,9 @@
 import { languages, type Locale } from "@/config/business";
 import { cn } from "@/lib/utils";
 
-export default function LanguageSwitcher({ locale, onLocaleChange }: { locale: Locale; onLocaleChange: (locale: Locale) => void }) {
+export default function LanguageSwitcher({ locale, onLocaleChange, className, buttonClassName }: { locale: Locale; onLocaleChange: (locale: Locale) => void; className?: string; buttonClassName?: string }) {
   return (
-    <div className="flex rounded-full border border-ink/10 bg-white/65 p-1 shadow-sm backdrop-blur-xl" aria-label="Language switcher">
+    <div className={cn("flex rounded-full border border-ink/10 bg-white/65 p-1 shadow-sm backdrop-blur-xl", className)} aria-label="Language switcher">
       {languages.map((language) => (
         <button
           key={language.code}
@@ -13,6 +13,7 @@ export default function LanguageSwitcher({ locale, onLocaleChange }: { locale: L
           onClick={() => onLocaleChange(language.code)}
           className={cn(
             "rounded-full px-3 py-1.5 text-xs font-semibold transition-all duration-300",
+            buttonClassName,
             locale === language.code ? "bg-ink text-white shadow-sm" : "text-ink/55 hover:text-ink"
           )}
           aria-pressed={locale === language.code}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 74f6dc2..ca4a8f5 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -48,7 +48,8 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
         </div>
 
         <div className="relative z-[3] flex items-center gap-2 md:hidden">
-          <PhysicsButton href={whatsappUrl} external className="rounded-full bg-ink px-4 py-2.5 text-xs font-semibold text-white shadow-soft transition-colors hover:bg-optical sm:px-5 sm:text-sm">
+          <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} className="bg-white/80 backdrop-blur-none" buttonClassName="px-2 sm:px-3" />
+          <PhysicsButton href={whatsappUrl} external className="rounded-full bg-ink px-3 py-2.5 text-xs font-semibold text-white shadow-soft transition-colors hover:bg-optical max-[374px]:hidden sm:px-5 sm:text-sm">
             {t.nav.cta}
           </PhysicsButton>
           <motion.button
@@ -90,9 +91,6 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
                 </motion.a>
               ))}
             </div>
-            <div className="mt-4 flex items-center justify-between gap-3">
-              <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} />
-            </div>
           </motion.div>
         ) : null}
       </AnimatePresence>