139 lines
7.1 KiB
PHP
139 lines
7.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ $title ?? 'Webmail' }} · {{ config('app.name') }}</title>
|
|
@vite(['resources/css/app.css'])
|
|
@livewireStyles
|
|
<style>
|
|
.wm-sidebar-overlay {
|
|
display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;
|
|
}
|
|
@media(max-width:700px) {
|
|
.wm-sidebar {
|
|
position:fixed!important;left:-220px;top:0;bottom:0;z-index:200;
|
|
transition:left .22s cubic-bezier(.4,0,.2,1);
|
|
box-shadow:2px 0 16px rgba(0,0,0,.18);
|
|
}
|
|
.wm-sidebar.open { left:0!important; }
|
|
.wm-sidebar.open ~ .wm-overlay { display:block; }
|
|
.wm-hamburger { display:flex!important; }
|
|
.wm-main { margin-left:0!important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin:0;background:var(--mw-bg);color:var(--mw-t1);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;font-size:13.5px;-webkit-font-smoothing:antialiased;">
|
|
|
|
<div class="mw-shell" style="position:relative;">
|
|
|
|
{{-- Mobile Overlay --}}
|
|
<div class="wm-sidebar-overlay wm-overlay" id="wm-overlay" onclick="wmCloseSidebar()"></div>
|
|
|
|
{{-- ═══ SIDEBAR ═══ --}}
|
|
<aside class="mw-sidebar wm-sidebar" id="wm-sidebar" style="width:200px;min-width:200px;">
|
|
|
|
{{-- Branding + Mobile Close --}}
|
|
<div class="mw-sb-head" style="display:flex;align-items:center;justify-content:space-between;">
|
|
<div style="display:flex;align-items:center;gap:10px;">
|
|
<div class="mw-sb-mark">
|
|
<svg width="15" height="15" viewBox="0 0 14 14" fill="none">
|
|
<rect x=".5" y="2.5" width="13" height="9" rx="1.5" stroke="white" stroke-width="1.3"/>
|
|
<path d="M.5 5l6.5 4 6.5-4" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="mw-sb-name">WEBMAIL</div>
|
|
<div class="mw-sb-sub">{{ config('app.name') }}</div>
|
|
</div>
|
|
</div>
|
|
<button onclick="wmCloseSidebar()"
|
|
style="display:none;background:none;border:none;cursor:pointer;color:var(--mw-t3);padding:4px;margin-right:4px;"
|
|
class="wm-hamburger">✕</button>
|
|
</div>
|
|
|
|
@if(session('webmail_email'))
|
|
<div style="padding:10px 10px 4px;">
|
|
<a href="{{ route('ui.webmail.compose') }}" wire:navigate
|
|
style="display:flex;align-items:center;gap:8px;padding:8px 12px;
|
|
background:var(--mw-v);border-radius:7px;color:#fff;
|
|
font-size:12.5px;font-weight:500;text-decoration:none;"
|
|
onclick="wmCloseSidebar()">
|
|
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
|
|
<path d="M7 1.5v11M1.5 7h11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</svg>
|
|
Neue Nachricht
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
<nav class="mw-nav" style="padding-top:6px;" onclick="wmCloseSidebar()">
|
|
@if(session('webmail_email'))
|
|
<livewire:ui.webmail.folder-sidebar />
|
|
@endif
|
|
</nav>
|
|
|
|
@if(session('webmail_email'))
|
|
<div style="padding:10px;border-top:1px solid var(--mw-b1);display:flex;flex-direction:column;gap:4px;">
|
|
<div style="display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;overflow:hidden;">
|
|
<div style="width:28px;height:28px;border-radius:50%;background:var(--mw-vbg);border:1px solid var(--mw-vbd);
|
|
display:flex;align-items:center;justify-content:center;flex-shrink:0;
|
|
font-size:10px;font-weight:600;color:var(--mw-v2);">
|
|
{{ strtoupper(substr(session('webmail_email'), 0, 1)) }}
|
|
</div>
|
|
<div style="min-width:0;flex:1;overflow:hidden;">
|
|
<div style="font-size:11.5px;font-weight:500;color:var(--mw-t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
|
|
{{ session('webmail_email') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:4px;">
|
|
<a href="{{ route('ui.webmail.settings') }}" wire:navigate
|
|
style="flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
|
|
padding:6px 8px;border-radius:5px;font-size:11.5px;color:var(--mw-t4);
|
|
text-decoration:none;background:{{ request()->routeIs('ui.webmail.settings') ? 'var(--mw-bg3)' : 'none' }};"
|
|
onclick="wmCloseSidebar()">
|
|
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
|
|
<circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M7 1.5v1.2M7 11.3v1.2M1.5 7h1.2M11.3 7h1.2M2.9 2.9l.85.85M10.25 10.25l.85.85M2.9 11.1l.85-.85M10.25 3.75l.85-.85" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
Einstellungen
|
|
</a>
|
|
<livewire:ui.webmail.logout-button />
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</aside>
|
|
|
|
{{-- ═══ MAIN ═══ --}}
|
|
<div class="mw-main wm-main" style="flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0;">
|
|
{{-- Mobile Topbar --}}
|
|
<div style="display:none;align-items:center;gap:10px;padding:10px 14px;
|
|
border-bottom:1px solid var(--mw-b1);background:var(--mw-bg);"
|
|
class="wm-hamburger" id="wm-topbar">
|
|
<button onclick="wmOpenSidebar()"
|
|
style="background:none;border:none;cursor:pointer;color:var(--mw-t2);padding:4px;display:flex;flex-direction:column;gap:3px;">
|
|
<span style="display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;"></span>
|
|
<span style="display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;"></span>
|
|
<span style="display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;"></span>
|
|
</button>
|
|
<span style="font-size:13px;font-weight:600;color:var(--mw-t2);">Webmail</span>
|
|
</div>
|
|
<div class="mw-content" style="flex:1;padding:20px 24px;">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function wmOpenSidebar() { document.getElementById('wm-sidebar').classList.add('open'); document.getElementById('wm-overlay').style.display='block'; }
|
|
function wmCloseSidebar() { document.getElementById('wm-sidebar').classList.remove('open'); document.getElementById('wm-overlay').style.display='none'; }
|
|
</script>
|
|
|
|
@vite(['resources/js/app-webmail.js'])
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|