max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove language switcher from mobile menu, keep only the header one

Browse source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 22:16:20 +02:00
parent 1c4e3ad163
commit 4a8fee0603
1 changed files with 22 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
hifi-src/src/components/Navbar.jsx
View file

@ -45,12 +45,11 @@ const LANGUAGE_OPTIONS = [
{ code: 'en', label: 'English', Flag: FlagGB }, { code: 'en', label: 'English', Flag: FlagGB },
]; ];
function LanguageSwitcher({ overHero = false, variant = 'header' }) { function LanguageSwitcher({ overHero = false }) {
const { language, setLanguage, t } = useLanguage(); const { language, setLanguage, t } = useLanguage();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const containerRef = useRef(null); const containerRef = useRef(null);
const current = LANGUAGE_OPTIONS.find((opt) => opt.code === language) || LANGUAGE_OPTIONS[0]; const current = LANGUAGE_OPTIONS.find((opt) => opt.code === language) || LANGUAGE_OPTIONS[0];
const isHeader = variant === 'header';
useEffect(() => { useEffect(() => {
if (!isOpen) return undefined; if (!isOpen) return undefined;
@ -76,37 +75,23 @@ function LanguageSwitcher({ overHero = false, variant = 'header' }) {
aria-haspopup="listbox" aria-haspopup="listbox"
aria-expanded={isOpen} aria-expanded={isOpen}
aria-label={t('languageToggle.label')} aria-label={t('languageToggle.label')}
className={ className={`flex items-center gap-1 rounded-full p-1.5 transition ${overHero ? 'hover:bg-white/10' : 'hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
isHeader
? `flex items-center gap-1 rounded-full p-1.5 transition ${overHero ? 'hover:bg-white/10' : 'hover:bg-neutral-100 dark:hover:bg-neutral-800'}`
: 'flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600 hover:text-brand-600'
}
> >
{isHeader && ( <span className={`block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] ring-1 ${overHero ? 'ring-white/50' : 'ring-neutral-300 dark:ring-neutral-600'}`}>
<span className={`block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] ring-1 ${overHero ? 'ring-white/50' : 'ring-neutral-300 dark:ring-neutral-600'}`}> <current.Flag className="h-full w-full" />
<current.Flag className="h-full w-full" /> </span>
</span> <svg
)} viewBox="0 0 20 20"
{!isHeader && current.label} fill="currentColor"
{isHeader && ( aria-hidden="true"
<svg className={`h-3 w-3 transition-transform ${overHero ? 'text-white/70' : 'text-neutral-400'} ${isOpen ? 'rotate-180' : ''}`}
viewBox="0 0 20 20" >
fill="currentColor" <path fillRule="evenodd" clipRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" />
aria-hidden="true" </svg>
className={`h-3 w-3 transition-transform ${overHero ? 'text-white/70' : 'text-neutral-400'} ${isOpen ? 'rotate-180' : ''}`}
>
<path fillRule="evenodd" clipRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" />
</svg>
)}
</button> </button>
{isOpen && ( {isOpen && (
<div <div role="listbox" className="absolute right-0 z-50 mt-2 min-w-[9rem] overflow-hidden rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-900">
role="listbox"
className={`absolute z-50 mt-2 min-w-[9rem] overflow-hidden rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-900 ${
isHeader ? 'right-0' : 'left-0'
}`}
>
{LANGUAGE_OPTIONS.map((opt) => ( {LANGUAGE_OPTIONS.map((opt) => (
<button <button
key={opt.code} key={opt.code}
@ -121,11 +106,9 @@ function LanguageSwitcher({ overHero = false, variant = 'header' }) {
opt.code === language ? 'font-semibold text-brand-600 dark:text-brand-400' : 'text-neutral-700 dark:text-neutral-200' opt.code === language ? 'font-semibold text-brand-600 dark:text-brand-400' : 'text-neutral-700 dark:text-neutral-200'
}`} }`}
> >
{isHeader && ( <span className="block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] ring-1 ring-neutral-300 dark:ring-neutral-600">
<span className="block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] ring-1 ring-neutral-300 dark:ring-neutral-600"> <opt.Flag className="h-full w-full" />
<opt.Flag className="h-full w-full" /> </span>
</span>
)}
{opt.label} {opt.label}
</button> </button>
))} ))}
@ -142,7 +125,7 @@ export default function Navbar() {
const { user } = useAuth(); const { user } = useAuth();
const { phone, whatsapp } = useSiteSettings(); const { phone, whatsapp } = useSiteSettings();
const { t } = useLanguage(); const { t } = useLanguage();
const totalItems = whatsapp ? 9 : 8; const totalItems = whatsapp ? 8 : 7;
const location = useLocation(); const location = useLocation();
const isHome = location.pathname === '/'; const isHome = location.pathname === '/';
const [scrolled, setScrolled] = useState(!isHome); const [scrolled, setScrolled] = useState(!isHome);
@ -235,7 +218,7 @@ export default function Navbar() {
<div className="flex items-center justify-self-end gap-1"> <div className="flex items-center justify-self-end gap-1">
{AdminIcon} {AdminIcon}
{!open && <LanguageSwitcher overHero={transparent} variant="header" />} {!open && <LanguageSwitcher overHero={transparent} />}
<ThemeToggle overHero={transparent} /> <ThemeToggle overHero={transparent} />
</div> </div>
</div> </div>
@ -273,12 +256,8 @@ export default function Navbar() {
<div className={`h-px w-16 bg-brand-500/60 ${flyIn()}`} style={flyInStyle(4)} /> <div className={`h-px w-16 bg-brand-500/60 ${flyIn()}`} style={flyInStyle(4)} />
<div className={flyIn()} style={flyInStyle(5)}>
<LanguageSwitcher variant="menu" />
</div>
{phone && ( {phone && (
<a href={`tel:${digitsOnly(phone)}`} className={`flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600 hover:text-brand-600 ${flyIn()}`} style={flyInStyle(6)}> <a href={`tel:${digitsOnly(phone)}`} className={`flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600 hover:text-brand-600 ${flyIn()}`} style={flyInStyle(5)}>
<DynamicIcon name="phone" className="h-4 w-4" /> <DynamicIcon name="phone" className="h-4 w-4" />
{phone} {phone}
</a> </a>
@ -289,7 +268,7 @@ export default function Navbar() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className={`flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600 hover:text-brand-600 ${flyIn()}`} className={`flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600 hover:text-brand-600 ${flyIn()}`}
style={flyInStyle(7)} style={flyInStyle(6)}
> >
<DynamicIcon name="message-circle" className="h-4 w-4" /> <DynamicIcon name="message-circle" className="h-4 w-4" />
{t('nav.whatsapp')} {t('nav.whatsapp')}
@ -300,7 +279,7 @@ export default function Navbar() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className={`flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600 hover:text-brand-600 ${flyIn()}`} className={`flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-neutral-600 hover:text-brand-600 ${flyIn()}`}
style={flyInStyle(whatsapp ? 8 : 7)} style={flyInStyle(whatsapp ? 7 : 6)}
> >
<DynamicIcon name="shopping-bag" className="h-4 w-4" /> <DynamicIcon name="shopping-bag" className="h-4 w-4" />
{t('nav.shop')} {t('nav.shop')}