From 6c7df8d0114969aa441c19f22a422d6950212b24 Mon Sep 17 00:00:00 2001
From: bonamin <just_big_v@yahoo.com>
Date: Sun, 19 Jul 2026 11:16:18 +0300
Subject: [PATCH] =?UTF-8?q?fix(menu-app):=20replace=20EN|=CE=95=CE=9B=20pi?=
 =?UTF-8?q?ll=20with=20a=20compact=20globe=20icon=20+=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The two-segment language pill sat over the header image/logo area and
clipped it. Swapped for a small globe icon button tucked closer to the
corner, opening a lightweight dropdown with full language names on tap.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../menu-app/src/pages/MenuPage.jsx           | 66 ++++++++++++++-----
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/connect_frontend/menu-app/src/pages/MenuPage.jsx b/connect_frontend/menu-app/src/pages/MenuPage.jsx
index 651763c..7a76e34 100644
--- a/connect_frontend/menu-app/src/pages/MenuPage.jsx
+++ b/connect_frontend/menu-app/src/pages/MenuPage.jsx
@@ -4,7 +4,7 @@ import {
   Search, Leaf, X, Plus, ShoppingBag,
   ChevronLeft, ArrowRight, Send, Loader2, Info,
   Armchair, Check, SearchX, UtensilsCrossed, AlertCircle,
-  Soup, Salad, Wheat, IceCream2, Wine,
+  Soup, Salad, Wheat, IceCream2, Wine, Globe,
 } from 'lucide-react'
 import { fetchMenu, submitOrder, CLOUD_URL } from '../api'
 import {
@@ -113,6 +113,53 @@ function SheetHandle() {
   )
 }
 
+// ── Language Switcher ────────────────────────────────────────────────────────
+const LANGS = [
+  { code: 'en', label: 'English' },
+  { code: 'gr', label: 'Ελληνικά' },
+]
+
+function LanguageSwitcher({ lang, setLang }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onClickAway = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
+    document.addEventListener('mousedown', onClickAway)
+    return () => document.removeEventListener('mousedown', onClickAway)
+  }, [open])
+
+  return (
+    <div ref={ref} className="absolute right-3 top-3 z-20">
+      <button
+        onClick={() => setOpen(o => !o)}
+        aria-label="Change language"
+        className="flex h-8 w-8 items-center justify-center rounded-full bg-white/70 text-[#6d6a59] ring-1 ring-[#e3dcc9] backdrop-blur transition active:scale-95"
+      >
+        <Globe className="h-4 w-4" strokeWidth={1.8} />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-10 min-w-[140px] overflow-hidden rounded-2xl bg-[#fcfbf7] py-1.5 shadow-card ring-1 ring-[#e7e1d1]">
+          {LANGS.map(({ code, label }) => (
+            <button
+              key={code}
+              onClick={() => { setLang(code); setOpen(false) }}
+              className={`flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-[13px] font-medium transition ${
+                lang === code ? 'text-[#2d3b2d]' : 'text-[#8a8266] hover:text-[#2d3b2d]'
+              }`}
+            >
+              {label}
+              {lang === code && <Check className="h-3.5 w-3.5" strokeWidth={2.4} />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 // ── Hero ──────────────────────────────────────────────────────────────────────
 function Hero({ lang, setLang, restaurant }) {
   const name = restaurant?.name || RESTAURANT_FALLBACK.name
@@ -123,22 +170,7 @@ function Hero({ lang, setLang, restaurant }) {
 
   return (
     <header className="relative px-6 pt-7 pb-6 text-center">
-      {/* Language toggle */}
-      <div className="absolute right-5 top-6">
-        <div className="flex items-center rounded-full bg-white/70 p-0.5 text-[11px] font-semibold ring-1 ring-[#e3dcc9] backdrop-blur">
-          {['en', 'gr'].map(l => (
-            <button
-              key={l}
-              onClick={() => setLang(l)}
-              className={`rounded-full px-2.5 py-1 uppercase tracking-wider transition ${
-                lang === l ? 'bg-[#2d3b2d] text-[#f0e9d6]' : 'text-[#8a8266]'
-              }`}
-            >
-              {l === 'en' ? 'EN' : 'ΕΛ'}
-            </button>
-          ))}
-        </div>
-      </div>
+      <LanguageSwitcher lang={lang} setLang={setLang} />
 
       {headerImageUrl ? (
         <img