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

Revert mobile menu item dimming, dropdown simply overlays on top

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

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

@ -45,21 +45,13 @@ const LANGUAGE_OPTIONS = [
{ code: 'en', label: 'English', Flag: FlagGB }, { code: 'en', label: 'English', Flag: FlagGB },
]; ];
function LanguageSwitcher({ overHero = false, variant = 'header', onOpenChange }) { function LanguageSwitcher({ overHero = false, variant = 'header' }) {
const { language, setLanguage, t } = useLanguage(); const { language, setLanguage, t } = useLanguage();
const [isOpen, setIsOpenState] = 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'; 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) => {
@ -147,7 +139,6 @@ 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();
@ -194,14 +185,6 @@ 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 {
@ -291,15 +274,11 @@ 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" onOpenChange={setLangMenuOpen} /> <LanguageSwitcher variant="menu" />
</div> </div>
{phone && ( {phone && (
<a <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)}>
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>
@ -309,7 +288,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 ${flyInDimmable()}`} 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(7)}
> >
<DynamicIcon name="message-circle" className="h-4 w-4" /> <DynamicIcon name="message-circle" className="h-4 w-4" />