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

Dim covered mobile menu items instead of shifting layout on language dropdown

Browse source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 22:03:29 +02:00
parent 7cdb601cfd
commit 4690c88357
1 changed files with 28 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,13 +45,21 @@ 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, variant = 'header', onOpenChange }) {
const { language, setLanguage, t } = useLanguage(); const { language, setLanguage, t } = useLanguage();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpenState] = 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'; const isHeader = variant === 'header';
const setIsOpen = (value) => {
setIsOpenState((prev) => {
const next = typeof value === 'function' ? value(prev) : value;
onOpenChange?.(next);
return next;
});
};
useEffect(() => { useEffect(() => {
if (!isOpen) return undefined; if (!isOpen) return undefined;
const handleClickOutside = (e) => { const handleClickOutside = (e) => {
@ -105,8 +113,8 @@ function LanguageSwitcher({ overHero = false, variant = 'header' }) {
{isOpen && ( {isOpen && (
<div <div
role="listbox" role="listbox"
className={`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 ${ 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 ? 'absolute right-0' : 'relative left-0' isHeader ? 'right-0' : 'left-0'
}`} }`}
> >
{LANGUAGE_OPTIONS.map((opt) => ( {LANGUAGE_OPTIONS.map((opt) => (
@ -139,6 +147,7 @@ export default function Navbar() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [menuVisible, setMenuVisible] = useState(false); const [menuVisible, setMenuVisible] = useState(false);
const [langMenuOpen, setLangMenuOpen] = useState(false);
const { user } = useAuth(); const { user } = useAuth();
const { phone, whatsapp } = useSiteSettings(); const { phone, whatsapp } = useSiteSettings();
const { t } = useLanguage(); const { t } = useLanguage();
@ -185,6 +194,14 @@ export default function Navbar() {
}, [open, totalItems]); }, [open, totalItems]);
const flyIn = () => `transition-all duration-500 ease-out ${menuVisible ? 'opacity-100' : 'opacity-0'}`; const flyIn = () => `transition-all duration-500 ease-out ${menuVisible ? 'opacity-100' : 'opacity-0'}`;
// Wie flyIn(), aber lässt sich zusätzlich per langMenuOpen abdunkeln - eine einzelne
// opacity-Klasse statt zwei nebeneinander gesetzten, da bei gleichzeitig vorhandenen
// Tailwind-opacity-Klassen die Reihenfolge im generierten CSS (nicht im class-Attribut)
// entscheidet und "opacity-100" die Abdunklung sonst zufällig überschreiben kann.
const flyInDimmable = () =>
`transition-all duration-500 ease-out ${
!menuVisible ? 'opacity-0' : langMenuOpen ? 'pointer-events-none opacity-20' : 'opacity-100'
}`;
const flyInStyle = (index) => { const flyInStyle = (index) => {
const delayIndex = menuVisible ? index : totalItems - 1 - index; const delayIndex = menuVisible ? index : totalItems - 1 - index;
return { return {
@ -274,11 +291,15 @@ 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)}> <div className={flyIn()} style={flyInStyle(5)}>
<LanguageSwitcher variant="menu" /> <LanguageSwitcher variant="menu" onOpenChange={setLangMenuOpen} />
</div> </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 ${flyInDimmable()}`}
style={flyInStyle(6)}
>
<DynamicIcon name="phone" className="h-4 w-4" /> <DynamicIcon name="phone" className="h-4 w-4" />
{phone} {phone}
</a> </a>
@ -288,7 +309,7 @@ export default function Navbar() {
href={`https://wa.me/${digitsOnly(whatsapp).replace(/^0/, '49').replace('+', '')}`} href={`https://wa.me/${digitsOnly(whatsapp).replace(/^0/, '49').replace('+', '')}`}
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 ${flyInDimmable()}`}
style={flyInStyle(7)} style={flyInStyle(7)}
> >
<DynamicIcon name="message-circle" className="h-4 w-4" /> <DynamicIcon name="message-circle" className="h-4 w-4" />