Eingefärbtes Navigationmenü mit Links zu Feedback, Sammlung und Bookmarklets
// ==UserScript==
// @name Mydealz Navigation
// @namespace http://tampermonkey.net/
// @version 1.1
// @description Eingefärbtes Navigationmenü mit Links zu Feedback, Sammlung und Bookmarklets
// @author MD928835
// @license MIT
// @match https://www.mydealz.de/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// --- Konfiguration ---
const customCSS = `
.nav, .subNav--light { background-color: #009900 !important; transition: none !important; display: flex; align-items: center; }
.nav a, .nav span, .nav button, .subNav--light a, .subNav--light span, .subNav--light button { color: white !important; font-weight: bold !important; }
.nav svg, .subNav--light svg { color: white !important; fill: white !important; }
.input-widget .search-icon { color: #009900 !important; fill: #009900 !important; }
.input--search { background-color: white !important; color: #333 !important; }
.nav-button.button--type-secondary, .nav button, .subNav--light button, .button--type-tag, .button--mode-flat { background-color: transparent !important; border-color: transparent !important; }
.nav button:hover, .subNav--light button:hover, .button--type-tag:hover, .button--mode-flat:hover, .nav a:hover, .nav span:hover, .nav button:hover, .subNav--light a:hover, .subNav--light span:hover, .subNav--light button:hover { background-color: transparent !important; }
[data-t="dealAlarms"]:hover, a[href*="deal-alarm"]:hover { background-color: transparent !important; }
.nav-logo > span { display: none !important; }
.nav-logo { background-image: url("https://www.mydealz.de/assets/img/logo/default-light_d4b86.svg") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; width: 195px !important; height: 60px !important; pointer-events: auto !important; cursor: pointer; flex-shrink: 0; }
.nav-hideSearch .button--mode-brand { background-color: white !important; color: #005B94 !important; }
.nav-hideSearch .button--mode-brand svg, .nav-hideSearch .button--mode-brand span { color: #005B94 !important; fill: #005B94 !important; }
.threadItemCard-img .scrollBox-container:not(.carousel--isNext) { display: none !important; }
/* --- LAYOUT FÜR NAVIGATION --- */
header .subNav--light { height: auto !important; min-height: 40px !important; position: relative; }
header .subNav--light .scrollBox { position: relative; }
/* -------------------------------------------- */
header .subNav--light .scrollBox-container {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100%;
overflow-x: auto !important;
padding: 0 5px !important;
margin: 0 !important;
box-sizing: border-box;
background-color: #009900 !important;
/* --- Scrollbar verstecken --- */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
/* --------------------------------- */
}
/* --- NEU: Scrollbar verstecken (WebKit) --- */
header .subNav--light .scrollBox-container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
width: 0;
height: 0;
}
/* --------------------------------------- */
header .subNav--light .scrollBox-item { flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
header .subNav--light .scrollBox-item .nav-link { display: flex !important; align-items: center !important; height: 100%; padding: 0 10px !important; white-space: nowrap !important; text-decoration: none !important; color: white !important; font-weight: bold !important; box-sizing: border-box; line-height: 1; cursor: pointer; }
header .subNav--light .scrollBox-item .nav-link svg.icon { width: 18px; height: 18px; margin-right: 6px; flex-shrink: 0; }
header .subNav--light .scrollBox-item:hover { background-color: transparent !important; }
header .subNav--light .scrollBox-item .nav-link:hover { background-color: transparent !important; }
header .subNav--light::before,
header .subNav--light::after,
header .subNav--light .scrollBox::before,
header .subNav--light .scrollBox::after {
display: none !important;
background: none !important;
content: none !important;
width: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* ----------------------------------------------------------------------- */
/* --- Dropdown Menü Styles --- */
.mydealz-dropdown-attached, .mdplus-dropdown-attached {
position: fixed; z-index: 99999 !important; background-color: white; border-radius: 4px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
padding: 8px 0; margin-top: 2px;
min-width: 220px;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0s linear 0.15s;
}
/* Sichtbarer Zustand */
.dropdown-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0s linear 0s;
}
.mydealz-dropdown-attached { width: 220px; }
.mdplus-dropdown-attached { width: 240px; }
.mydealz-dropdown-item, .mdplus-dropdown-item { display: block; padding: 10px 16px; color: #333 !important; text-decoration: none; white-space: nowrap; font-weight: normal !important; background-color: transparent; transition: background-color 0.1s ease; /* Hover-Transition */ }
.mydealz-dropdown-item:hover, .mdplus-dropdown-item:hover { background-color: #f0f0f0 !important; color: #333 !important; }
.mdplus-dropdown-item { cursor: pointer; }
.mdplus-divider { height: 1px; margin: 8px 0; background-color: #e5e5e5; }
.mdplus-add-item {
color: #333 !important;
font-weight: bold !important;
}
/* ----------------------------------------------------------------- */
/* --- Mobile Ansicht (Nur Icons) --- */
@media (max-width: 767px) {
header .subNav--light .scrollBox-item .nav-link span {
display: none;
}
header .subNav--light .scrollBox-item .nav-link svg.icon {
margin-right: 0;
}
header .subNav--light .scrollBox-item .nav-link {
padding: 0 12px !important;
}
}
/* --- Modal Styles --- */
.mdplus-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 10001; }
.mdplus-modal-content { background-color: white; border-radius: 8px; padding: 24px; width: 500px; max-width: 90%; }
.mdplus-modal-title { font-size: 18px; font-weight: bold; margin-bottom: 16px; color: #333; }
.mdplus-form-group { margin-bottom: 16px; }
.mdplus-form-label { display: block; margin-bottom: 8px; font-weight: bold; color: #555;}
.mdplus-form-input, .mdplus-form-textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; color: #333; }
.mdplus-form-textarea { min-height: 100px; font-family: monospace; resize: vertical; }
.mdplus-form-error { color: red; font-size: 12px; margin-top: 4px; display: none; }
.mdplus-modal-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
.mdplus-btn { padding: 10px 18px; border-radius: 4px; cursor: pointer; border: none; margin-left: 8px; font-weight: bold; font-size: 14px; transition: background-color 0.2s ease; }
.mdplus-btn-cancel { background-color: #f0f0f0; color: #555; }
.mdplus-btn-cancel:hover { background-color: #e0e0e0; }
.mdplus-btn-save { background-color: #009900; color: white; }
.mdplus-btn-save:hover { background-color: #007700; }
`;
// --- Daten ---
const categoryTree = [ { name: "Auto & Motorrad", url: "/gruppe/auto-motorrad" }, { name: "Beauty & Gesundheit", url: "/gruppe/beauty" }, { name: "Dienstleistungen & Verträge", url: "/gruppe/dienstleistungen-vertraege" }, { name: "Elektronik", url: "/gruppe/elektronik" }, { name: "Family & Kids", url: "/gruppe/family-kids" }, { name: "Fashion & Accessoires", url: "/gruppe/fashion-accessoires" }, { name: "Gaming", url: "/gruppe/gaming" }, { name: "Garten & Baumarkt", url: "/gruppe/garten-baumarkt" }, { name: "Home & Living", url: "/gruppe/home-living" }, { name: "Kultur & Freizeit", url: "/gruppe/kultur-freizeit" }, { name: "Lebensmittel & Haushalt", url: "/gruppe/food" }, { name: "Sport & Outdoor", url: "/gruppe/sport" }, { name: "Telefon- & Internet-Verträge", url: "/gruppe/telefon-internet" }, { name: "Urlaub & Reisen", url: "/gruppe/reisen" }, { name: "Versicherung & Finanzen", url: "/gruppe/vertraege-finanzen" } ];
const vouchers = [ { name: "Adidas", url: "/gutscheine/adidas-de" }, { name: "Amazon", url: "/gutscheine/amazon-de" }, { name: "IKEA", url: "/gutscheine/ikea-com" }, { name: "Lidl", url: "/gutscheine/lidl-de" }, { name: "Media Markt", url: "/gutscheine/mediamarkt-de" }, { name: "OTTO", url: "/gutscheine/otto-de" }, { name: "Saturn", url: "/gutscheine/saturn-de" }, { name: "Zalando", url: "/gutscheine/zalando-de" }, { name: "alle anzeigen ", url: "/gutscheine/" } ];
// --- MD+ Funktionen ---
function loadBookmarklets() { try { const bm = localStorage.getItem('mdplus_bookmarklets'); return bm ? JSON.parse(bm) : []; } catch (e) { console.error("[NavScript] Error loading bookmarklets:", e); return []; } }
function saveBookmarklets(bms) { try { localStorage.setItem('mdplus_bookmarklets', JSON.stringify(bms)); } catch (e) { console.error("[NavScript] Error saving bookmarklets:", e); } }
function addBookmarklet(title, code) { const bms = loadBookmarklets(); const idx = bms.findIndex(b => b.title === title); if (idx > -1) bms[idx] = {title, code}; else bms.push({title, code}); bms.sort((a, b) => a.title.localeCompare(b.title)); saveBookmarklets(bms); return bms; }
function executeBookmarklet(code) { console.log("[NavScript] Attempting bookmarklet execution via script tag:", code.substring(0,100)+"..."); let finalCode = code; try { let cleanCode = code.trim().startsWith('javascript:') ? code.trim().substring(11) : code.trim(); try { const decoded = decodeURIComponent(cleanCode); cleanCode = decoded; } catch (e) { console.warn("[NavScript] Failed to decode bookmarklet code:", e); } finalCode = cleanCode; if (finalCode.startsWith('(function(){') && finalCode.endsWith('})()')) { finalCode = finalCode.substring('(function(){'.length, finalCode.length - '})()'.length); } if (finalCode.endsWith(';')) { finalCode = finalCode.slice(0, -1); } const script = document.createElement('script'); script.textContent = finalCode; document.head.appendChild(script); document.head.removeChild(script); } catch (error) { console.error('[NavScript] Bookmarklet execution error (script tag setup):', error); alert(`Bookmarklet Error (script tag setup):\n\n${error.name}: ${error.message}`); } }
function createAddBookmarkletModal() { if (document.querySelector('.mdplus-modal')) return; const modal = document.createElement('div'); modal.className = 'mdplus-modal'; modal.innerHTML = `<div class="mdplus-modal-content"><div class="mdplus-modal-title">Bookmarklet hinzufügen</div><div class="mdplus-form-group"><label class="mdplus-form-label" for="bookmarklet-title">Titel</label><input type="text" id="bookmarklet-title" class="mdplus-form-input" placeholder="Name des Bookmarklets"></div><div class="mdplus-form-group"><label class="mdplus-form-label" for="bookmarklet-code">JavaScript-Code</label><textarea id="bookmarklet-code" class="mdplus-form-textarea" placeholder="javascript:... oder reiner JS-Code"></textarea><div id="bookmarklet-code-error" class="mdplus-form-error">Gültiger JavaScript-Code erforderlich.</div></div><div class="mdplus-modal-actions"><button class="mdplus-btn mdplus-btn-cancel">Abbrechen</button><button class="mdplus-btn mdplus-btn-save">Speichern</button></div></div>`; const titleInput = modal.querySelector('#bookmarklet-title'); const codeInput = modal.querySelector('#bookmarklet-code'); const errorElement = modal.querySelector('#bookmarklet-code-error'); modal.addEventListener('click', (e) => { if (e.target === modal) document.body.removeChild(modal); }); modal.querySelector('.mdplus-btn-cancel').addEventListener('click', () => document.body.removeChild(modal)); modal.querySelector('.mdplus-btn-save').addEventListener('click', () => { const title = titleInput.value.trim(); let code = codeInput.value.trim(); errorElement.style.display = 'none'; if (!title) { alert('Titel fehlt.'); titleInput.focus(); return; } if (!code) { alert('Code fehlt.'); codeInput.focus(); return; } if (!code.startsWith('javascript:')) code = 'javascript:' + code; if (code.length < "javascript:;".length && !code.startsWith('javascript:alert')) { errorElement.textContent = "Code zu kurz/ungültig."; errorElement.style.display = 'block'; codeInput.focus(); return; } addBookmarklet(title, code); document.body.removeChild(modal); updateMDPlusDropdown(); }); document.body.appendChild(modal); titleInput.focus(); }
function updateMDPlusDropdown(dropdownElement) { if (!dropdownElement) { dropdownElement = dropdownCache['mdplus']; if (!dropdownElement) return; } const bms = loadBookmarklets(); dropdownElement.innerHTML = ''; if (bms.length === 0) { dropdownElement.innerHTML = '<div style="padding:10px 16px; color: #888; font-style: italic;">Keine Bookmarklets</div>'; } else { bms.forEach(bm => { const item = document.createElement('div'); item.className = 'mdplus-dropdown-item'; item.textContent = bm.title; item.title = bm.code; item.addEventListener('click', (e) => { e.stopPropagation(); executeBookmarklet(bm.code); hideDropdown(dropdownElement); }); dropdownElement.appendChild(item); }); } const divider = document.createElement('div'); divider.className = 'mdplus-divider'; dropdownElement.appendChild(divider); const addItem = document.createElement('div'); addItem.className = 'mdplus-dropdown-item mdplus-add-item'; addItem.textContent = 'Bookmarklet hinzufügen...'; addItem.addEventListener('click', (e) => { e.stopPropagation(); hideDropdown(dropdownElement); createAddBookmarkletModal(); }); dropdownElement.appendChild(addItem); }
// --- Hauptlogik ---
let subNavReplaced = false;
let dropdownCache = {};
let currentVisibleDropdown = null;
let hideTimeout = null;
// *** createNavItem mit title Attribut ***
function createNavItem(text, url, iconName) {
const item = document.createElement('div');
item.className = 'scrollBox-item';
const link = document.createElement('a');
link.className = 'nav-link';
link.href = url;
link.innerHTML = `<svg width="18" height="18" class="icon icon--${iconName}"><use xlink:href="/assets/img/ico_f3562.svg#${iconName}"></use></svg><span>${text}</span>`;
link.title = text; // Tooltip hinzufügen
item.appendChild(link);
return item;
}
// *** createDropdownItem mit title Attribut für den Hauptlink ***
function createDropdownItem(text, url, iconName, dropdownKey, dropdownCssClass, items) {
const item = document.createElement('div');
item.className = 'scrollBox-item has-dropdown';
item.dataset.dropdownKey = dropdownKey;
const link = document.createElement('a');
link.className = 'nav-link';
link.href = url;
link.innerHTML = `<svg width="18" height="18" class="icon icon--${iconName}"><use xlink:href="/assets/img/ico_f3562.svg#${iconName}"></use></svg><span>${text}</span>`;
link.title = text; // Tooltip hinzufügen
if (url === '#') link.addEventListener('click', e => e.preventDefault());
item.appendChild(link);
const dropdown = document.createElement('div');
dropdown.className = dropdownCssClass + '-attached';
dropdown.dataset.dropdownKey = dropdownKey;
items.forEach(si => {
const l = document.createElement('a');
l.className = dropdownCssClass.includes('mydealz') ? 'mydealz-dropdown-item' : 'mdplus-dropdown-item';
l.href = si.url;
l.textContent = si.name;
dropdown.appendChild(l);
});
dropdownCache[dropdownKey] = dropdown;
return item;
}
// *** createMdPlusDropdownItem mit title Attribut ***
function createMdPlusDropdownItem() {
const dropdownKey = 'mdplus';
const item = document.createElement('div');
item.className = 'scrollBox-item has-dropdown nav-item-mdplus';
item.dataset.dropdownKey = dropdownKey;
const link = document.createElement('a');
link.className = 'nav-link';
link.href = "#";
const iconName = 'bookmark';
link.innerHTML = `<svg width="18" height="18" class="icon icon--${iconName}"><use xlink:href="/assets/img/ico_f3562.svg#${iconName}"></use></svg><span>MD+</span>`;
link.title = "MD+"; // Tooltip hinzufügen
link.addEventListener('click', (e) => e.preventDefault());
item.appendChild(link);
const dropdown = document.createElement('div');
dropdown.className = 'mdplus-dropdown-attached';
dropdown.dataset.dropdownKey = dropdownKey;
dropdown.innerHTML = '<span style="padding:10px 16px; display: block; color: #888;">Lade...</span>';
dropdownCache[dropdownKey] = dropdown;
return item;
}
function showDropdown(triggerItem) {
clearTimeout(hideTimeout);
const key = triggerItem.dataset.dropdownKey;
const dropdownElement = dropdownCache[key];
if (!dropdownElement) { console.error(`[NavScript] Dropdown element not found for key: ${key}`); return; }
if (currentVisibleDropdown && currentVisibleDropdown !== dropdownElement) { hideDropdown(currentVisibleDropdown); }
const rect = triggerItem.getBoundingClientRect();
dropdownElement.style.top = `${rect.bottom}px`;
dropdownElement.style.left = `${rect.left}px`;
const dropdownRight = rect.left + dropdownElement.offsetWidth;
if (dropdownRight > window.innerWidth) {
dropdownElement.style.left = `${window.innerWidth - dropdownElement.offsetWidth - 10}px`; // 10px Puffer
}
if (key === 'mdplus') { updateMDPlusDropdown(dropdownElement); }
if (!dropdownElement.parentNode) { document.body.appendChild(dropdownElement); }
requestAnimationFrame(() => {
dropdownElement.classList.add('dropdown-visible');
});
currentVisibleDropdown = dropdownElement;
if (!dropdownElement.hasAttribute('data-listeners-attached')) {
dropdownElement.addEventListener('mouseenter', () => { clearTimeout(hideTimeout); });
dropdownElement.addEventListener('mouseleave', () => { startHideTimeout(dropdownElement); });
dropdownElement.setAttribute('data-listeners-attached', 'true');
}
}
function hideDropdown(dropdownElement) {
if (dropdownElement) {
dropdownElement.classList.remove('dropdown-visible');
if (dropdownElement.parentNode === document.body) {
setTimeout(() => {
// Nur entfernen, wenn es immer noch versteckt ist und im body hängt
if (!dropdownElement.classList.contains('dropdown-visible') && dropdownElement.parentNode === document.body) {
const currentCachedElement = dropdownCache[dropdownElement.dataset.dropdownKey];
if (currentCachedElement === dropdownElement) {
document.body.removeChild(dropdownElement);
}
}
}, 200); // Zeit muss länger sein als die CSS-Transition-Dauer
}
if (currentVisibleDropdown === dropdownElement) { currentVisibleDropdown = null; }
}
}
function startHideTimeout(elementToHide = currentVisibleDropdown) {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(() => {
hideDropdown(elementToHide);
}, 300); // Verzögerung bevor das Dropdown verschwindet
}
function replaceSubNav() {
if (subNavReplaced) return;
// Suche nach dem potentiellen .scrollBox Wrapper UND dem .scrollBox-container darin
const scrollBoxWrapper = document.querySelector('header .subNav--light .scrollBox');
const subNavContainer = document.querySelector('header .subNav--light .scrollBox-container');
const targetContainer = scrollBoxWrapper ? scrollBoxWrapper : subNavContainer?.parentNode; // Nimm den Wrapper, wenn er existiert, sonst den direkten Parent
if (!targetContainer || targetContainer.querySelector('.scrollBox-container[data-nav-modified="true"]')) {
//console.log("[NavScript] Target container not found or already modified.");
return;
}
const originalScrollBoxContainer = targetContainer.querySelector('.scrollBox-container');
if (!originalScrollBoxContainer) {
console.log("[NavScript] Original scrollBox-container not found inside target.");
return;
}
console.log("[NavScript] Found target container, replacing content...");
dropdownCache = {}; // Reset cache bei Neuaufbau
const newNav = document.createElement('div');
newNav.className = 'scrollBox-container'; // Behält die Originalklasse für eventuelle Basisstyles bei
newNav.dataset.navModified = 'true'; // Markierung, dass das Skript aktiv war
// Menüpunkte
newNav.appendChild(createDropdownItem("Kategorien", "/gruppe/", "categories", "kategorien", "mydealz-dropdown", categoryTree));
newNav.appendChild(createDropdownItem("Gutscheine", "/gutscheine/", "voucher", "gutscheine", "mydealz-dropdown", vouchers));
newNav.appendChild(createNavItem("Deals", "/deals-new", "tag"));
newNav.appendChild(createNavItem("Freebies", "/gruppe/freebies?temperatureFrom=any", "gift"));
newNav.appendChild(createNavItem("Diskussionen", "/diskussion", "comments"));
newNav.appendChild(createNavItem("Feedback", "/feedback", "campaign"));
newNav.appendChild(createNavItem("Sammlung", "/2035404#comments", "cake"));
newNav.appendChild(createMdPlusDropdownItem());
try {
targetContainer.replaceChild(newNav, originalScrollBoxContainer);
subNavReplaced = true; // Flag setzen
console.log("[NavScript] Container content replaced. Attaching listeners...");
newNav.querySelectorAll('.has-dropdown').forEach(item => {
const dropdown = dropdownCache[item.dataset.dropdownKey];
if (!dropdown) {
console.warn(`[NavScript] Dropdown element for key ${item.dataset.dropdownKey} not in cache after creation.`);
return;
}
// Mouseenter auf das Menüitem zeigt das Dropdown
item.addEventListener('mouseenter', () => {
showDropdown(item);
});
item.addEventListener('mouseleave', () => {
startHideTimeout();
});
});
console.log("[NavScript] Item listeners attached.");
} catch (error) {
console.error("[NavScript] Error during replace/listeners:", error);
subNavReplaced = false; // Reset flag on error
}
}
// --- Initialisierung und Beobachtung ---
function initializeNavigation() {
replaceSubNav();
}
// CSS nur einmal einfügen
const styleElement = document.createElement('style');
styleElement.id = 'mydealz-nav-custom-styles';
if (!document.getElementById(styleElement.id)) {
styleElement.textContent = customCSS;
document.head.appendChild(styleElement);
console.log("[NavScript] CSS injected.");
}
let observer = null;
const parentSelector = 'header .subNav--light';
function startObserver() {
const parentNode = document.querySelector(parentSelector);
if (parentNode && !observer) {
observer = new MutationObserver((mutationsList, obs) => {
const modifiedContainer = parentNode.querySelector('.scrollBox-container[data-nav-modified="true"]');
if (!modifiedContainer) {
//console.log("[NavScript Observer] Modified container disappeared. Resetting flag and attempting re-init...");
subNavReplaced = false;
initializeNavigation();
} else {
Object.values(dropdownCache).forEach(dropdown => {
if (dropdown.classList.contains('dropdown-visible') && !dropdown.parentNode) {
console.warn("[NavScript Observer] Visible dropdown detached from body. Re-attaching.");
// Finde das zugehörige Trigger-Item neu, um Position zu bestimmen
const trigger = parentNode.querySelector(`.has-dropdown[data-dropdown-key="${dropdown.dataset.dropdownKey}"]`);
if (trigger) {
const rect = trigger.getBoundingClientRect();
dropdown.style.top = `${rect.bottom}px`;
dropdown.style.left = `${rect.left}px`;
document.body.appendChild(dropdown);
} else {
hideDropdown(dropdown);
}
}
});
}
});
observer.observe(parentNode, { childList: true, subtree: true });
//console.log("[NavScript] MutationObserver started on:", parentSelector);
} else if (!parentNode) {
// Falls der Elterncontainer noch nicht da ist, später erneut versuchen
//console.log("[NavScript] Parent node for observer not found, retrying...");
setTimeout(startObserver, 500);
}
}
// Startlogik
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
initializeNavigation();
startObserver();
});
} else {
initializeNavigation();
startObserver();
}
setTimeout(initializeNavigation, 750);
// Evtl. noch späterer Versuch für hartnäckige Fälle
setTimeout(initializeNavigation, 2000);
// Listener um Dropdowns zu schließen, wenn außerhalb geklickt wird
document.addEventListener('click', function(event) {
if (currentVisibleDropdown && !currentVisibleDropdown.contains(event.target)) {
let clickedOnTrigger = false;
document.querySelectorAll('.has-dropdown').forEach(trigger => {
if (trigger.contains(event.target)) {
clickedOnTrigger = true;
}
});
if (!clickedOnTrigger) {
hideDropdown(currentVisibleDropdown);
}
}
}, true); // Use capture phase
})();