Keep language switcher in mobile nav

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
 

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}

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>