core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Erweiterung der Druckerstatusüberprüfung durch Implementierung einer Steckdosenabfrage für Drucker. Verbesserung der Benutzeroberfläche mit optimierten Dark Mode-Elementen und neuen Statusanzeigen für Drucker. Anpassungen in den Templates zur Unterstützung dynamischer Statusinformationen und zur Verbesserung der Benutzererfahrung. Aktualisierung der CSS-Styles für ein ansprechenderes Design und bessere Benutzerinteraktion.

Browse Source
This commit is contained in:
Till Tomczak
2025-05-29 09:46:16 +02:00
parent e9071c7b57
commit d81149229a
13 changed files with 2138 additions and 1233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
backend/app/static/js/dark-mode-fix.js Normal file
View File

@@ -0,0 +1,159 @@
/**
* Dark Mode Toggle Fix
* Diese Datei stellt sicher, dass der Dark Mode Toggle Button korrekt funktioniert
*/
document.addEventListener('DOMContentLoaded', function() {
// Dark Mode Toggle Button
const darkModeToggle = document.getElementById('darkModeToggle');
const html = document.documentElement;
// Local Storage Key
const STORAGE_KEY = 'myp-dark-mode';
/**
* Aktuellen Dark Mode Status aus Local Storage oder Systemeinstellung abrufen
*/
function isDarkMode() {
const savedMode = localStorage.getItem(STORAGE_KEY);
if (savedMode !== null) {
return savedMode === 'true';
}
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
/**
* Icons im Toggle-Button aktualisieren
*/
function updateIcons(isDark) {
// Finde die Icons im Button - versuche sowohl direkte Kinder als auch verschachtelte
let sunIcon = darkModeToggle.querySelector('.sun-icon');
let moonIcon = darkModeToggle.querySelector('.moon-icon');
// Wenn Icons nicht gefunden wurden, erstelle sie neu
if (!sunIcon || !moonIcon) {
console.warn('Icons nicht gefunden - erzeuge neue Icons');
// Entferne vorhandene Inhalte im Button
darkModeToggle.innerHTML = '';
// Neue Icons erstellen
sunIcon = document.createElement('svg');
sunIcon.className = 'w-5 h-5 sm:w-5 sm:h-5 sun-icon';
sunIcon.setAttribute('fill', 'none');
sunIcon.setAttribute('stroke', 'currentColor');
sunIcon.setAttribute('viewBox', '0 0 24 24');
sunIcon.setAttribute('aria-hidden', 'true');
sunIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />';
moonIcon = document.createElement('svg');
moonIcon.className = 'w-5 h-5 sm:w-5 sm:h-5 moon-icon hidden';
moonIcon.setAttribute('fill', 'none');
moonIcon.setAttribute('stroke', 'currentColor');
moonIcon.setAttribute('viewBox', '0 0 24 24');
moonIcon.setAttribute('aria-hidden', 'true');
moonIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />';
darkModeToggle.appendChild(sunIcon);
darkModeToggle.appendChild(moonIcon);
}
// Icons entsprechend dem Dark Mode Status anzeigen/verbergen
if (isDark) {
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
} else {
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
}
}
/**
* Dark Mode aktivieren/deaktivieren
*/
function setDarkMode(enable) {
console.log(`Setze Dark Mode auf: ${enable ? 'Aktiviert' : 'Deaktiviert'}`);
if (enable) {
html.classList.add('dark');
html.setAttribute('data-theme', 'dark');
html.style.colorScheme = 'dark';
if (darkModeToggle) {
darkModeToggle.setAttribute('aria-pressed', 'true');
darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
// Button-Icons aktualisieren
updateIcons(true);
}
} else {
html.classList.remove('dark');
html.setAttribute('data-theme', 'light');
html.style.colorScheme = 'light';
if (darkModeToggle) {
darkModeToggle.setAttribute('aria-pressed', 'false');
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
// Button-Icons aktualisieren
updateIcons(false);
}
}
// Einstellung im Local Storage speichern
localStorage.setItem(STORAGE_KEY, enable.toString());
// ThemeColor Meta-Tag aktualisieren
const metaThemeColor = document.getElementById('metaThemeColor');
if (metaThemeColor) {
metaThemeColor.setAttribute('content', enable ? '#000000' : '#ffffff');
}
// Event für andere Komponenten auslösen
window.dispatchEvent(new CustomEvent('darkModeChanged', {
detail: { isDark: enable }
}));
}
// Toggle Dark Mode Funktion
function toggleDarkMode() {
const currentMode = isDarkMode();
setDarkMode(!currentMode);
}
// Event Listener für Toggle Button
if (darkModeToggle) {
// Vorherige Event-Listener entfernen, um Duplikate zu vermeiden
const newDarkModeToggle = darkModeToggle.cloneNode(true);
darkModeToggle.parentNode.replaceChild(newDarkModeToggle, darkModeToggle);
// Neuen Event-Listener hinzufügen
newDarkModeToggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation(); // Verhindere Bubbling
toggleDarkMode();
});
// Aktualisiere die Variable auf das neue Element
darkModeToggle = newDarkModeToggle;
// Initialen Status setzen
const isDark = isDarkMode();
setDarkMode(isDark);
console.log('Dark Mode Toggle Button erfolgreich initialisiert');
} else {
console.error('Dark Mode Toggle Button konnte nicht gefunden werden!');
}
// Tastaturkürzel: Strg+Shift+D für Dark Mode Toggle
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
toggleDarkMode();
e.preventDefault();
}
});
// Direkte Verfügbarkeit der Funktionen im globalen Bereich
window.toggleDarkMode = toggleDarkMode;
window.isDarkMode = isDarkMode;
window.setDarkMode = setDarkMode;
});

136
backend/app/static/js/dark-mode.js
View File

@@ -79,7 +79,7 @@
}, 100);
// Erfolgsmeldung in die Konsole
console.log(`Dark Mode ${enable ? 'aktiviert' : 'deaktiviert'}`);
console.log(`${enable ? '🌙' : '☀️'} ${enable ? 'Dark Mode aktiviert - Augenschonender Modus aktiv' : 'Light Mode aktiviert - Heller Modus aktiv'}`);
}
// Aktualisiert das Theme-Color Meta-Tag
@@ -117,35 +117,38 @@
darkModeToggle.setAttribute('aria-pressed', isDark.toString());
darkModeToggle.title = isDark ? "Light Mode aktivieren" : "Dark Mode aktivieren";
// Stile aktualisieren mit Tailwind-Klassen
if (isDark) {
darkModeToggle.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
darkModeToggle.classList.add('bg-slate-800', 'hover:bg-slate-700', 'text-amber-400');
darkModeToggle.setAttribute('data-tooltip', 'Light Mode aktivieren');
} else {
darkModeToggle.classList.remove('bg-slate-800', 'hover:bg-slate-700', 'text-amber-400');
darkModeToggle.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
darkModeToggle.setAttribute('data-tooltip', 'Dark Mode aktivieren');
}
// Icons aktualisieren
const sunIcon = darkModeToggle.querySelector('.sun-icon');
const moonIcon = darkModeToggle.querySelector('.moon-icon');
// Icon aktualisieren - ohne innerHTML für CSP-Kompatibilität
const icon = darkModeToggle.querySelector('svg');
if (icon) {
// Animationsklasse hinzufügen
icon.classList.add('animate-spin-once');
// Nach Animation wieder entfernen
setTimeout(() => {
icon.classList.remove('animate-spin-once');
}, 300);
const pathElement = icon.querySelector('path');
if (pathElement) {
// Sonnen- oder Mond-Symbol
if (isDark) {
pathElement.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
} else {
pathElement.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
if (sunIcon && moonIcon) {
if (isDark) {
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
} else {
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
}
} else {
// Fallback für ältere Implementierung mit einem Icon
const icon = darkModeToggle.querySelector('svg');
if (icon) {
// Animationsklasse hinzufügen
icon.classList.add('animate-spin-once');
// Nach Animation wieder entfernen
setTimeout(() => {
icon.classList.remove('animate-spin-once');
}, 300);
const pathElement = icon.querySelector('path');
if (pathElement) {
// Sonnen- oder Mond-Symbol
if (isDark) {
pathElement.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
} else {
pathElement.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
}
}
}
}
@@ -158,6 +161,7 @@
// Wenn kein Toggle existiert, erstelle einen
if (!darkModeToggle) {
console.log('🔧 Dark Mode Toggle nicht gefunden - erstelle automatisch einen neuen Button');
createDarkModeToggle();
}
@@ -165,6 +169,7 @@
if (darkModeToggle) {
darkModeToggle.addEventListener('click', function() {
const isDark = !shouldUseDarkMode();
console.log(`👆 Dark Mode Toggle: Wechsel zu ${isDark ? '🌙 dunkel' : '☀️ hell'} angefordert`);
setDarkMode(isDark);
});
}
@@ -173,6 +178,7 @@
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
const isDark = !shouldUseDarkMode();
console.log(`⌨️ Tastenkombination STRG+SHIFT+D erkannt: Wechsel zu ${isDark ? '🌙 dunkel' : '☀️ hell'}`);
setDarkMode(isDark);
e.preventDefault();
}
@@ -186,6 +192,7 @@
darkModeMediaQuery.addEventListener('change', function(e) {
// Nur anwenden, wenn keine benutzerdefinierte Einstellung gespeichert ist
if (localStorage.getItem(STORAGE_KEY) === null) {
console.log(`🖥️ Systemeinstellung geändert: ${e.matches ? '🌙 dunkel' : '☀️ hell'}`);
setDarkMode(e.matches);
}
});
@@ -193,22 +200,27 @@
// Fallback für ältere Browser
darkModeMediaQuery.addListener(function(e) {
if (localStorage.getItem(STORAGE_KEY) === null) {
console.log(`🖥️ Systemeinstellung geändert (Legacy-Browser): ${e.matches ? '🌙 dunkel' : '☀️ hell'}`);
setDarkMode(e.matches);
}
});
}
// Initialer Zustand
setDarkMode(shouldUseDarkMode());
const initialState = shouldUseDarkMode();
console.log(`🔍 Ermittelter Ausgangszustand: ${initialState ? '🌙 Dark Mode' : '☀️ Light Mode'}`);
setDarkMode(initialState);
// Animation für den korrekten Modus hinzufügen
const animClass = shouldUseDarkMode() ? 'dark-mode-transition' : 'light-mode-transition';
const animClass = initialState ? 'dark-mode-transition' : 'light-mode-transition';
document.body.classList.add(animClass);
// Animation entfernen nach Abschluss
setTimeout(() => {
document.body.classList.remove(animClass);
}, 300);
console.log('🚀 Dark Mode Handler erfolgreich initialisiert');
}
// Erstellt ein Toggle-Element, falls keines existiert
@@ -218,46 +230,61 @@
const nav = document.querySelector('nav');
const container = document.querySelector('.dark-mode-container') || header || nav;
if (!container) return;
if (!container) {
console.error('⚠️ Kein geeigneter Container für Dark Mode Toggle gefunden');
return;
}
// Toggle-Button erstellen
darkModeToggle = document.createElement('button');
darkModeToggle.id = 'darkModeToggle';
darkModeToggle.className = 'p-2 sm:p-3 rounded-full bg-indigo-600 text-white transition-all duration-300';
darkModeToggle.className = 'dark-mode-toggle-new';
darkModeToggle.setAttribute('aria-label', 'Dark Mode umschalten');
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
darkModeToggle.setAttribute('data-tooltip', 'Dark Mode aktivieren');
darkModeToggle.setAttribute('data-action', 'toggle-dark-mode');
// SVG-Icon erstellen (ohne innerHTML für Content Security Policy)
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "w-4 h-4 sm:w-5 sm:h-5");
svg.setAttribute("fill", "none");
svg.setAttribute("stroke", "currentColor");
svg.setAttribute("viewBox", "0 0 24 24");
// Sonnen-Icon erstellen
const sunIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
sunIcon.setAttribute("class", "w-5 h-5 sm:w-5 sm:h-5 sun-icon");
sunIcon.setAttribute("fill", "none");
sunIcon.setAttribute("stroke", "currentColor");
sunIcon.setAttribute("viewBox", "0 0 24 24");
sunIcon.setAttribute("aria-hidden", "true");
// Path für das Icon
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("stroke-linecap", "round");
path.setAttribute("stroke-linejoin", "round");
path.setAttribute("stroke-width", "2");
path.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
const sunPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
sunPath.setAttribute("stroke-linecap", "round");
sunPath.setAttribute("stroke-linejoin", "round");
sunPath.setAttribute("stroke-width", "2");
sunPath.setAttribute("d", "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z");
// Mond-Icon erstellen
const moonIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
moonIcon.setAttribute("class", "w-5 h-5 sm:w-5 sm:h-5 moon-icon hidden");
moonIcon.setAttribute("fill", "none");
moonIcon.setAttribute("stroke", "currentColor");
moonIcon.setAttribute("viewBox", "0 0 24 24");
moonIcon.setAttribute("aria-hidden", "true");
const moonPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
moonPath.setAttribute("stroke-linecap", "round");
moonPath.setAttribute("stroke-linejoin", "round");
moonPath.setAttribute("stroke-width", "2");
moonPath.setAttribute("d", "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z");
// Elemente zusammenfügen
svg.appendChild(path);
darkModeToggle.appendChild(svg);
// Screenreader-Text hinzufügen
const srText = document.createElement('span');
srText.className = 'sr-only';
srText.textContent = 'Dark Mode umschalten';
darkModeToggle.appendChild(srText);
sunIcon.appendChild(sunPath);
moonIcon.appendChild(moonPath);
darkModeToggle.appendChild(sunIcon);
darkModeToggle.appendChild(moonIcon);
// Zum Container hinzufügen
container.appendChild(darkModeToggle);
console.log('✅ Dark Mode Toggle Button erfolgreich erstellt und zur Benutzeroberfläche hinzugefügt');
}
// Sofort Dark/Light Mode anwenden (vor DOMContentLoaded)
const isDark = shouldUseDarkMode();
console.log(`🏃‍♂️ Sofortige Anwendung: ${isDark ? '🌙 Dark Mode' : '☀️ Light Mode'} (vor DOM-Ladung)`);
setDarkMode(isDark);
})();
@@ -275,4 +302,5 @@ if (!document.querySelector('style#dark-mode-animations')) {
}
`;
document.head.appendChild(styleTag);
console.log('💫 Animations-Styles für Dark Mode Toggle hinzugefügt');
}

149
backend/app/static/js/ui-components.js
View File

@@ -18,7 +18,8 @@
constructor() {
// DOM-Elemente
this.darkModeToggle = document.getElementById('darkModeToggle');
this.darkModeIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('svg') : null;
this.sunIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.sun-icon') : null;
this.moonIcon = this.darkModeToggle ? this.darkModeToggle.querySelector('.moon-icon') : null;
this.html = document.documentElement;
// Local Storage Key
@@ -51,6 +52,10 @@
this.updateDarkModeIcon(true);
this.darkModeToggle.setAttribute('aria-pressed', 'true');
this.darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
if (this.sunIcon && this.moonIcon) {
this.sunIcon.classList.add('hidden');
this.moonIcon.classList.remove('hidden');
}
} else {
this.html.classList.remove('dark');
this.html.setAttribute('data-theme', 'light');
@@ -58,6 +63,10 @@
this.updateDarkModeIcon(false);
this.darkModeToggle.setAttribute('aria-pressed', 'false');
this.darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
if (this.sunIcon && this.moonIcon) {
this.sunIcon.classList.remove('hidden');
this.moonIcon.classList.add('hidden');
}
}
// Einstellung im Local Storage speichern
@@ -74,7 +83,7 @@
detail: { isDark: enable }
}));
console.log('Dark Mode set to:', enable);
console.log(`${enable ? '🌙' : '☀️'} Design umgeschaltet auf: ${enable ? 'Dark Mode' : 'Light Mode'}`);
}
/**
@@ -82,18 +91,17 @@
* @param {boolean} isDark - Ob Dark Mode aktiv ist
*/
updateDarkModeIcon(isDark) {
if (!this.darkModeIcon) return;
if (!this.darkModeToggle) return;
if (isDark) {
// Sonne anzeigen (für Wechsel zum Light Mode)
this.darkModeIcon.innerHTML = `
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
`;
} else {
// Mond anzeigen (für Wechsel zum Dark Mode)
this.darkModeIcon.innerHTML = `
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
`;
// Stellen sicher, dass die Icons korrekt angezeigt werden
if (this.sunIcon && this.moonIcon) {
if (isDark) {
this.sunIcon.classList.add('hidden');
this.moonIcon.classList.remove('hidden');
} else {
this.sunIcon.classList.remove('hidden');
this.moonIcon.classList.add('hidden');
}
}
}
@@ -102,15 +110,15 @@
*/
init() {
if (!this.darkModeToggle) {
console.error('Dark Mode Toggle Button nicht gefunden!');
console.error('⚠️ Dark Mode Toggle Button nicht gefunden! UI-Komponente nicht verfügbar.');
return;
}
console.log('Dark Mode Manager initialisiert');
console.log('🚀 Dark Mode Manager erfolgreich initialisiert');
// Event Listener für den Dark Mode Toggle Button
this.darkModeToggle.addEventListener('click', () => {
console.log('Dark Mode Toggle geklickt');
console.log('👆 Dark Mode Toggle Button angeklickt');
const newDarkModeState = !this.isDarkMode();
this.setDarkMode(newDarkModeState);
});
@@ -118,7 +126,7 @@
// Alternative Event-Listener für Buttons mit data-action
document.addEventListener('click', (e) => {
if (e.target.closest('[data-action="toggle-dark-mode"]')) {
console.log('Dark Mode Toggle über data-action geklickt');
console.log('👆 Dark Mode Toggle über data-action aktiviert');
const newDarkModeState = !this.isDarkMode();
this.setDarkMode(newDarkModeState);
}
@@ -144,11 +152,111 @@
// Initialisierung: Aktuellen Status setzen
const isDark = this.isDarkMode();
console.log('Initial Dark Mode Status:', isDark);
console.log(`🔍 Initialer Dark Mode Status: ${isDark ? '🌙 aktiviert' : '☀️ deaktiviert'}`);
this.setDarkMode(isDark);
}
}
/**
* Mobile Menu Manager
*/
class MobileMenuManager {
constructor() {
this.mobileMenuToggle = document.getElementById('mobileMenuToggle');
this.mobileMenu = document.getElementById('mobileMenu');
this.isOpen = false;
this.init();
}
init() {
if (!this.mobileMenuToggle || !this.mobileMenu) {
console.log('ℹ️ Mobile Menu Komponenten nicht gefunden - Feature deaktiviert');
return;
}
console.log('📱 Mobile Menu Manager erfolgreich initialisiert');
// Event Listener für den Mobile Menu Toggle Button
this.mobileMenuToggle.addEventListener('click', () => {
this.toggleMenu();
});
// Event Listener für Klicks außerhalb des Menüs
document.addEventListener('click', (e) => {
if (this.isOpen && !this.mobileMenuToggle.contains(e.target) && !this.mobileMenu.contains(e.target)) {
this.closeMenu();
}
});
// Event Listener für das Schließen bei Klick auf einen Menüpunkt
this.mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
this.closeMenu();
});
});
// Beim Scrollen das Menü schließen
window.addEventListener('scroll', () => {
if (this.isOpen && window.scrollY > 50) {
this.closeMenu();
}
});
}
toggleMenu() {
if (this.isOpen) {
this.closeMenu();
} else {
this.openMenu();
}
}
openMenu() {
if (!this.mobileMenu || this.isOpen) return;
this.mobileMenu.classList.remove('hidden');
this.isOpen = true;
this.mobileMenuToggle.setAttribute('aria-expanded', 'true');
// Icon ändern
const menuIcon = this.mobileMenuToggle.querySelector('svg');
if (menuIcon) {
menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>';
}
// Animation - kleine Verzögerung für sanfte Animation
setTimeout(() => {
this.mobileMenu.classList.add('open');
}, 10);
// Body-Scroll verhindern (optional)
// document.body.style.overflow = 'hidden';
}
closeMenu() {
if (!this.mobileMenu || !this.isOpen) return;
this.mobileMenu.classList.remove('open');
this.isOpen = false;
this.mobileMenuToggle.setAttribute('aria-expanded', 'false');
// Icon zurücksetzen
const menuIcon = this.mobileMenuToggle.querySelector('svg');
if (menuIcon) {
menuIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>';
}
// Nach der Animation ausblenden
setTimeout(() => {
this.mobileMenu.classList.add('hidden');
}, 300);
// Body-Scroll wiederherstellen
// document.body.style.overflow = '';
}
}
/**
* User Dropdown Manager
*/
@@ -992,6 +1100,9 @@
// Dark Mode Manager
window.MYP.UI.darkMode = new DarkModeManager();
// Mobile Menu Manager
window.MYP.UI.mobileMenu = new MobileMenuManager();
// User Dropdown Manager
window.MYP.UI.userDropdown = new UserDropdownManager();
@@ -1025,7 +1136,7 @@
}
});
console.log('MYP UI Components initialized successfully');
console.log('✅ MYP UI Components erfolgreich initialisiert - Benutzeroberfläche bereit');
});
// Globale Variable für Toast-Funktion