163 lines
6.6 KiB
PHP
163 lines
6.6 KiB
PHP
<style>
|
|
.site-header {
|
|
background: white;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
|
|
}
|
|
.site-header .inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.site-header .logo {
|
|
font-size: 1.2em;
|
|
font-weight: 800;
|
|
color: #1a1a2e;
|
|
text-decoration: none;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.site-header .logo span { color: #667eea; }
|
|
.site-header nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
}
|
|
.site-header nav a {
|
|
color: #6b7280;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
.site-header nav a:hover { color: #667eea; }
|
|
|
|
/* Auth area */
|
|
.site-header .auth-area { display: flex; align-items: center; gap: 10px; }
|
|
.site-header .btn-outline {
|
|
padding: 7px 16px; border: 1.5px solid #d1d5db; border-radius: 8px;
|
|
font-size: 0.875em; font-weight: 500; color: #374151; text-decoration: none;
|
|
background: white; transition: border-color 0.2s, color 0.2s;
|
|
}
|
|
.site-header .btn-outline:hover { border-color: #667eea; color: #667eea; }
|
|
.site-header .btn-primary {
|
|
padding: 7px 16px; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
|
|
border-radius: 8px; font-size: 0.875em; font-weight: 600; color: white;
|
|
text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s;
|
|
}
|
|
.site-header .btn-primary:hover { opacity: 0.9; }
|
|
|
|
/* Avatar dropdown */
|
|
.avatar-wrapper { position: relative; }
|
|
.avatar-btn {
|
|
width: 38px; height: 38px; border-radius: 50%;
|
|
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
|
|
border: none; cursor: pointer; display: flex; align-items: center;
|
|
justify-content: center; color: white; font-weight: 700; font-size: 0.95em;
|
|
letter-spacing: 0.02em; transition: box-shadow 0.2s; flex-shrink: 0;
|
|
}
|
|
.avatar-btn:hover { box-shadow: 0 0 0 3px rgba(102,126,234,0.25); }
|
|
.avatar-dropdown {
|
|
display: none;
|
|
position: absolute; right: 0; top: calc(100% + 10px);
|
|
background: white; border: 1px solid #e5e7eb; border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 220px; overflow: hidden;
|
|
z-index: 200;
|
|
}
|
|
.avatar-dropdown.open { display: block; }
|
|
.avatar-dropdown .dd-header {
|
|
padding: 14px 16px 12px; border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
.avatar-dropdown .dd-name { font-weight: 700; font-size: 0.95em; color: #1a1a2e; }
|
|
.avatar-dropdown .dd-email { font-size: 0.78em; color: #9ca3af; margin-top: 2px; }
|
|
.avatar-dropdown .dd-link {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 11px 16px; font-size: 0.875em; color: #374151;
|
|
text-decoration: none; transition: background 0.15s;
|
|
}
|
|
.avatar-dropdown .dd-link:hover { background: #f9fafb; color: #667eea; }
|
|
.avatar-dropdown .dd-link svg { width: 16px; height: 16px; flex-shrink: 0; }
|
|
.avatar-dropdown .dd-divider { border: none; border-top: 1px solid #f3f4f6; margin: 0; }
|
|
.avatar-dropdown .dd-logout-form { margin: 0; }
|
|
.avatar-dropdown .dd-logout-btn {
|
|
width: 100%; display: flex; align-items: center; gap: 10px;
|
|
padding: 11px 16px; font-size: 0.875em; color: #dc2626;
|
|
background: none; border: none; cursor: pointer; transition: background 0.15s;
|
|
text-align: left;
|
|
}
|
|
.avatar-dropdown .dd-logout-btn:hover { background: #fef2f2; }
|
|
.avatar-dropdown .dd-logout-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
|
|
</style>
|
|
|
|
<header class="site-header">
|
|
<div class="inner">
|
|
<a href="{{ url('/') }}" class="logo">Veranstaltungs<span>-App</span></a>
|
|
|
|
<nav>
|
|
<a href="{{ url('/') }}">Home</a>
|
|
<a href="{{ route('events') }}">Events</a>
|
|
</nav>
|
|
|
|
<div class="auth-area">
|
|
@auth
|
|
{{-- Avatar mit Dropdown --}}
|
|
<div class="avatar-wrapper" id="avatarWrapper">
|
|
<button class="avatar-btn" id="avatarBtn" title="{{ Auth::user()->name }}">
|
|
{{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
|
|
</button>
|
|
<div class="avatar-dropdown" id="avatarDropdown">
|
|
<div class="dd-header">
|
|
<div class="dd-name">{{ Auth::user()->name }}</div>
|
|
<div class="dd-email">{{ Auth::user()->email }}</div>
|
|
</div>
|
|
<a href="{{ route('profile') }}" class="dd-link">
|
|
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
Mein Profil
|
|
</a>
|
|
<hr class="dd-divider">
|
|
<form method="POST" action="{{ route('logout') }}" class="dd-logout-form">
|
|
@csrf
|
|
<button type="submit" class="dd-logout-btn">
|
|
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
|
|
</svg>
|
|
Abmelden
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<a href="{{ route('login') }}" class="btn-outline">Anmelden</a>
|
|
<a href="{{ route('register') }}" class="btn-primary">Registrieren</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
(function () {
|
|
var btn = document.getElementById('avatarBtn');
|
|
var dropdown = document.getElementById('avatarDropdown');
|
|
if (!btn || !dropdown) return;
|
|
|
|
btn.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
dropdown.classList.toggle('open');
|
|
});
|
|
|
|
document.addEventListener('click', function (e) {
|
|
if (!dropdown.contains(e.target)) {
|
|
dropdown.classList.remove('open');
|
|
}
|
|
});
|
|
})();
|
|
</script>
|