feat(mobile): responsive mobile navigation, drawer menu and overflow fix
- eliminate horizontal viewport overflow on smartphones (< 400px) - implement mobile hamburger toggle and slide-down drawer for landing page and dashboard - add adaptive button typography and compact action controls on mobile devices - make course filter tabs horizontally scrollable with touch momentum - optimize hero typography and stats grid for small screens - verify mobile rendering via headless chromium pipeline
This commit is contained in:
Alex Mueller
parent
6807754e51
commit
4ccfa9d609
4 changed files with 453 additions and 16 deletions
|
|
@ -342,7 +342,7 @@
|
|||
};
|
||||
}
|
||||
if (registerBtn) {
|
||||
registerBtn.innerText = '💻 Zum Kurs-Dashboard';
|
||||
registerBtn.innerHTML = '<span class="btn-text-desktop">💻 Zum Kurs-Dashboard</span><span class="btn-text-mobile">💻 Dashboard</span>';
|
||||
registerBtn.style.background = '#10b981';
|
||||
registerBtn.onclick = () => {
|
||||
window.location.href = 'dashboard.html';
|
||||
|
|
@ -384,7 +384,7 @@
|
|||
}
|
||||
if (registerBtn) {
|
||||
registerBtn.style.display = 'inline-flex';
|
||||
registerBtn.innerText = '✨ Kostenlos registrieren';
|
||||
registerBtn.innerHTML = '<span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">✨ Registrieren</span>';
|
||||
registerBtn.style.background = '#0284c7';
|
||||
registerBtn.onclick = () => window.openAuthModal('register', { allowClose: true });
|
||||
}
|
||||
|
|
|
|||
369
assets/style.css
369
assets/style.css
|
|
@ -1472,16 +1472,377 @@ textarea:focus {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
📱 COMPREHENSIVE RESPONSIVE & MOBILE DESIGN SYSTEM
|
||||
========================================================================== */
|
||||
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.portal-stats-bar {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.portal-container {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
.portal-hero h1 {
|
||||
font-size: 2rem;
|
||||
|
||||
.portal-header-bar {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.portal-brand-logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.portal-brand-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.portal-nav-links {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.portal-hero {
|
||||
padding: 36px 14px 28px 14px;
|
||||
}
|
||||
|
||||
.portal-hero-pill {
|
||||
font-size: 0.74rem;
|
||||
padding: 4px 10px;
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.3;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.portal-hero h1 {
|
||||
font-size: clamp(1.65rem, 6.5vw, 2.3rem) !important;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1.18;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.portal-hero p {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 22px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.portal-hero-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.portal-hero-actions .portal-btn-primary,
|
||||
.portal-hero-actions .portal-btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.portal-stats-bar {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.portal-stat-card {
|
||||
padding: 14px 10px;
|
||||
}
|
||||
|
||||
.portal-stat-num {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.portal-stat-label {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.portal-stat-desc {
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Value Pillars Grid */
|
||||
.value-pillars-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 16px;
|
||||
margin: 24px 0 36px 0;
|
||||
}
|
||||
|
||||
.pillar-card {
|
||||
padding: 20px 18px;
|
||||
}
|
||||
|
||||
/* Dashboard Spotlight */
|
||||
.dashboard-hero-card {
|
||||
padding: 22px 16px;
|
||||
border-radius: 16px;
|
||||
margin: 24px 0 36px 0;
|
||||
}
|
||||
|
||||
.dashboard-mockup-bar {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.mockup-item {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mockup-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.mockup-label {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.mockup-value {
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
/* Domains & Steps */
|
||||
.domain-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.steps-container {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 14px;
|
||||
margin: 24px 0 36px 0;
|
||||
}
|
||||
|
||||
/* Bento Grid */
|
||||
.bento-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Dashboard Specific Mobile Enhancements */
|
||||
.resume-card {
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
padding: 20px 16px !important;
|
||||
gap: 14px !important;
|
||||
}
|
||||
|
||||
.resume-card > div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.resume-card h3 {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.resume-card .btn, #resume-action-btn {
|
||||
width: 100% !important;
|
||||
justify-content: center !important;
|
||||
text-align: center !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Horizontally Scrollable Filter Tabs (App-Feeling) */
|
||||
.portal-filter-tabs {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
gap: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
margin-bottom: 18px !important;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.portal-filter-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portal-tab-pill {
|
||||
flex-shrink: 0 !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 7px 14px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
/* Course Card Mobile */
|
||||
.portal-courses-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.portal-card {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.portal-card-footer {
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-start-ide {
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.btn-view-theory {
|
||||
flex-shrink: 0;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.certificate-container {
|
||||
width: calc(100vw - 28px) !important;
|
||||
max-width: 440px !important;
|
||||
padding: 20px 16px !important;
|
||||
box-sizing: border-box !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.btn-text-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
.btn-text-mobile {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.portal-header-bar {
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.portal-nav-container {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.portal-brand {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.portal-brand-title {
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
.portal-brand-badge {
|
||||
display: none !important; /* Hide alpha badge on small mobile screens */
|
||||
}
|
||||
|
||||
#nav-btn-login {
|
||||
display: none !important; /* Im mobilen Drawer Menü verfügbar */
|
||||
}
|
||||
|
||||
#nav-btn-register {
|
||||
padding: 6px 10px !important;
|
||||
font-size: 0.78rem !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
#nav-profile-pill {
|
||||
display: none !important; /* Im mobilen Drawer Menü verfügbar */
|
||||
}
|
||||
|
||||
#nav-auth-user {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#nav-auth-role {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#nav-btn-logout {
|
||||
padding: 6px 10px !important;
|
||||
font-size: 0.78rem !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.portal-stats-bar {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.portal-stat-num {
|
||||
font-size: 1.35rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Drawer & Hamburger Menu */
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
color: #f8fafc;
|
||||
font-size: 1.2rem;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mobile-menu-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-drawer {
|
||||
background: #090d16;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 14px 16px 18px 16px;
|
||||
position: sticky;
|
||||
top: 52px;
|
||||
z-index: 49;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.mobile-drawer-link {
|
||||
color: #cbd5e1;
|
||||
text-decoration: none;
|
||||
font-size: 0.94rem;
|
||||
font-weight: 600;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-drawer-link:hover, .mobile-drawer-link:active {
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
|
|
|
|||
|
|
@ -160,18 +160,34 @@
|
|||
</nav>
|
||||
|
||||
<!-- User Profile & Logout -->
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<div id="nav-profile-pill" style="display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); padding: 4px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.12);">
|
||||
<span id="nav-auth-user" style="font-size: 0.84rem; font-weight: 700; color: #38bdf8;">👤 Lädt...</span>
|
||||
<span id="nav-auth-role" style="font-size: 0.7rem; font-weight: 800; background: rgba(56, 189, 248, 0.15); color: #7dd3fc; padding: 2px 6px; border-radius: 99px; text-transform: uppercase;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<div id="nav-profile-pill" style="display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.08); padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.12);">
|
||||
<span id="nav-auth-user" style="font-size: 0.82rem; font-weight: 700; color: #38bdf8;">👤 Lädt...</span>
|
||||
<span id="nav-auth-role" style="font-size: 0.68rem; font-weight: 800; background: rgba(56, 189, 248, 0.15); color: #7dd3fc; padding: 2px 6px; border-radius: 99px; text-transform: uppercase;"></span>
|
||||
</div>
|
||||
<button type="button" class="btn" id="nav-btn-logout" style="padding: 6px 14px; font-size: 0.82rem; background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3);">
|
||||
Abmelden
|
||||
<button type="button" class="btn" id="nav-btn-logout" style="padding: 6px 12px; font-size: 0.82rem; background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3);">
|
||||
<span class="btn-text-desktop">Abmelden</span>
|
||||
<span class="btn-text-mobile">🚪</span>
|
||||
</button>
|
||||
<button type="button" id="portal-mobile-menu-btn" class="mobile-menu-toggle" aria-label="Menü umschalten" onclick="toggleMobileMenu()">
|
||||
<span>☰</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile Navigation Drawer -->
|
||||
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
|
||||
<a href="#overview" class="mobile-drawer-link" onclick="toggleMobileMenu()">🚀 Übersicht</a>
|
||||
<a href="#katalog" class="mobile-drawer-link" onclick="toggleMobileMenu()">📚 Meine Kurse</a>
|
||||
<a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🎓 IHK AP1 & AP2 Prüfung</a>
|
||||
<a href="workspace.html?course=python" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Web-IDE starten</a>
|
||||
<a href="#zertifikate-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🏆 Zertifikate</a>
|
||||
<a href="index.html" class="mobile-drawer-link" onclick="toggleMobileMenu()">🌐 Zur Landingpage</a>
|
||||
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">👨🏫 Dozenten-Portal</a>
|
||||
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin-Panel</a>
|
||||
</div>
|
||||
|
||||
<!-- 2. DASHBOARD WELCOME & LIVE METRICS -->
|
||||
<section class="portal-hero" id="overview" style="padding-top: 36px; padding-bottom: 36px;">
|
||||
<div class="portal-container">
|
||||
|
|
@ -836,6 +852,19 @@
|
|||
<script src="assets/certificate.js"></script>
|
||||
|
||||
<script>
|
||||
function toggleMobileMenu() {
|
||||
const drawer = document.getElementById('portal-mobile-drawer');
|
||||
const btn = document.getElementById('portal-mobile-menu-btn');
|
||||
if (!drawer) return;
|
||||
const isHidden = drawer.style.display === 'none' || !drawer.style.display;
|
||||
drawer.style.display = isHidden ? 'flex' : 'none';
|
||||
if (btn) btn.innerHTML = isHidden ? '✕' : '☰';
|
||||
}
|
||||
|
||||
if (window.location.hash === '#menu') {
|
||||
document.addEventListener('DOMContentLoaded', () => toggleMobileMenu());
|
||||
}
|
||||
|
||||
// 1. Authentifizierung erzwingen
|
||||
(function checkDashboardAuth() {
|
||||
if (window.AUTH && typeof window.AUTH.requireAuth === 'function') {
|
||||
|
|
@ -939,9 +968,15 @@
|
|||
if (al) al.style.display = 'inline-flex';
|
||||
const tl = document.getElementById('nav-teacher-link');
|
||||
if (tl) tl.style.display = 'inline-flex';
|
||||
const mAl = document.getElementById('mobile-drawer-admin-link');
|
||||
if (mAl) mAl.style.display = 'flex';
|
||||
const mTl = document.getElementById('mobile-drawer-teacher-link');
|
||||
if (mTl) mTl.style.display = 'flex';
|
||||
} else if (user.role === 'teacher') {
|
||||
const tl = document.getElementById('nav-teacher-link');
|
||||
if (tl) tl.style.display = 'inline-flex';
|
||||
const mTl = document.getElementById('mobile-drawer-teacher-link');
|
||||
if (mTl) mTl.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
49
index.html
49
index.html
|
|
@ -261,14 +261,30 @@
|
|||
<a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin</a>
|
||||
</nav>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span id="nav-auth-user" style="display: none; font-size: 0.82rem; font-weight: 700; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(56, 189, 248, 0.2);"></span>
|
||||
<button type="button" class="btn" id="nav-btn-login" style="padding: 6px 14px; font-size: 0.82rem; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2);" onclick="window.openAuthModal('login', { allowClose: true })">🔑 Anmelden</button>
|
||||
<button type="button" class="btn" id="nav-btn-register" style="padding: 6px 14px; font-size: 0.82rem; background: #0284c7; color: white;" onclick="window.openAuthModal('register', { allowClose: true })">✨ Kostenlos registrieren</button>
|
||||
<button type="button" class="btn" id="nav-btn-login" style="padding: 6px 12px; font-size: 0.82rem; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2);" onclick="window.openAuthModal('login', { allowClose: true })">🔑 Anmelden</button>
|
||||
<button type="button" class="btn" id="nav-btn-register" style="padding: 6px 12px; font-size: 0.82rem; background: #0284c7; color: white;" onclick="window.openAuthModal('register', { allowClose: true })"><span class="btn-text-desktop">✨ Kostenlos registrieren</span><span class="btn-text-mobile">Starten</span></button>
|
||||
<button type="button" id="portal-mobile-menu-btn" class="mobile-menu-toggle" aria-label="Menü umschalten" onclick="toggleMobileMenu()">
|
||||
<span>☰</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile Navigation Drawer -->
|
||||
<div id="portal-mobile-drawer" class="mobile-drawer" style="display: none;">
|
||||
<a href="#hero" class="mobile-drawer-link" onclick="toggleMobileMenu()">🚀 Start & Übersicht</a>
|
||||
<a href="#was-du-bekommst" class="mobile-drawer-link" onclick="toggleMobileMenu()">💎 Was du bekommst</a>
|
||||
<a href="#dashboard-spotlight" class="mobile-drawer-link" onclick="toggleMobileMenu()">📊 Kurs-Dashboard</a>
|
||||
<a href="#features-ide" class="mobile-drawer-link" onclick="toggleMobileMenu()">💻 Monaco Web-IDE</a>
|
||||
<a href="#ihk-section" class="mobile-drawer-link" onclick="toggleMobileMenu()">🎓 IHK Prüfungstrainer</a>
|
||||
<a href="#zielgruppen" class="mobile-drawer-link" onclick="toggleMobileMenu()">👥 Für wen?</a>
|
||||
<a href="dashboard.html" class="mobile-drawer-link" id="mobile-drawer-dash-link" style="display: none; color: #34d399; font-weight: 700;">💻 Zum Kurs-Dashboard →</a>
|
||||
<a href="teacher.html" class="mobile-drawer-link" id="mobile-drawer-teacher-link" style="display: none;">👨🏫 Dozenten-Portal</a>
|
||||
<a href="admin.html" class="mobile-drawer-link" id="mobile-drawer-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin-Panel</a>
|
||||
</div>
|
||||
|
||||
<!-- 2. HIGH-CONVERTING HERO SECTION -->
|
||||
<section class="portal-hero" id="hero">
|
||||
<div class="portal-container">
|
||||
|
|
@ -761,8 +777,20 @@
|
|||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/app_auth.js"></script>
|
||||
|
||||
<script>
|
||||
function toggleMobileMenu() {
|
||||
const drawer = document.getElementById('portal-mobile-drawer');
|
||||
const btn = document.getElementById('portal-mobile-menu-btn');
|
||||
if (!drawer) return;
|
||||
const isHidden = drawer.style.display === 'none' || !drawer.style.display;
|
||||
drawer.style.display = isHidden ? 'flex' : 'none';
|
||||
if (btn) btn.innerHTML = isHidden ? '✕' : '☰';
|
||||
}
|
||||
|
||||
if (window.location.hash === '#menu') {
|
||||
document.addEventListener('DOMContentLoaded', () => toggleMobileMenu());
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Prüfe Benutzer-Status
|
||||
if (window.AUTH && window.AUTH.isLoggedIn()) {
|
||||
|
|
@ -770,8 +798,21 @@
|
|||
const banner = document.getElementById('landing-logged-in-banner');
|
||||
const userNameEl = document.getElementById('landing-user-name');
|
||||
const dashLink = document.getElementById('nav-dashboard-link');
|
||||
const mobDashLink = document.getElementById('mobile-drawer-dash-link');
|
||||
const mobTeacherLink = document.getElementById('mobile-drawer-teacher-link');
|
||||
const mobAdminLink = document.getElementById('mobile-drawer-admin-link');
|
||||
|
||||
if (dashLink) dashLink.style.display = 'inline-flex';
|
||||
if (mobDashLink) mobDashLink.style.display = 'flex';
|
||||
|
||||
if (user) {
|
||||
if (user.role === 'admin') {
|
||||
if (mobAdminLink) mobAdminLink.style.display = 'flex';
|
||||
if (mobTeacherLink) mobTeacherLink.style.display = 'flex';
|
||||
} else if (user.role === 'teacher') {
|
||||
if (mobTeacherLink) mobTeacherLink.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
if (banner && user) {
|
||||
banner.style.display = 'flex';
|
||||
|
|
|
|||
Loading…
Reference in a new issue