diff --git a/app/resources/css/app.css b/app/resources/css/app.css index 43bacc2..bd05ae6 100644 --- a/app/resources/css/app.css +++ b/app/resources/css/app.css @@ -1245,6 +1245,73 @@ } .clu-btn-danger:hover { filter: brightness(1.05); } + /* ───── Site Details Sub-Sidebar Layout (vertical nav left, content right) ───── */ + .clu-detail-layout { + display: grid; + grid-template-columns: 220px 1fr; + gap: 18px; + align-items: start; + } + @media (max-width: 920px) { .clu-detail-layout { grid-template-columns: 1fr; } } + + .clu-detail-nav { + background: var(--color-glass-strong); + border: 1px solid var(--color-glass-border); + border-radius: var(--radius); + box-shadow: var(--shadow-glass), var(--shadow-glass-inset); + backdrop-filter: blur(28px) saturate(170%); + -webkit-backdrop-filter: blur(28px) saturate(170%); + padding: 10px 8px; + position: sticky; + top: 90px; + max-height: calc(100vh - 110px); + overflow-y: auto; + } + @media (max-width: 920px) { .clu-detail-nav { position: relative; top: auto; max-height: none; } } + + .clu-detail-section-title { + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.09em; + color: var(--color-muted-2); + font-weight: 600; + padding: 12px 12px 6px; + } + .clu-detail-section-title:first-child { padding-top: 4px; } + + .clu-detail-item { + display: flex; align-items: center; gap: 9px; + padding: 8px 11px; + border-radius: var(--radius-xs); + color: #3a3a47; + font-size: 13px; font-weight: 500; + transition: background .15s, color .15s, box-shadow .15s; + cursor: pointer; + text-decoration: none; + } + .clu-detail-item:hover { + background: rgba(255,255,255,0.55); + color: var(--color-fg); + text-decoration: none; + } + .clu-detail-item.active { + background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.66)); + color: var(--color-fg); + box-shadow: 0 4px 12px -6px rgba(40,52,92,0.25), inset 0 1px 0 rgba(255,255,255,0.9); + } + .clu-detail-item .ico { width: 15px; height: 15px; color: var(--color-muted); flex: none; } + .clu-detail-item.active .ico { color: var(--color-accent); } + .clu-detail-item .count { + margin-left: auto; + font-size: 10px; + font-family: var(--font-mono); + color: var(--color-muted); + background: rgba(255,255,255,0.7); + padding: 1px 6px; + border-radius: 8px; + border: 1px solid var(--color-hairline); + } + /* ───── Site Details — exact template port (dtabs / fm / editor / console) ───── */ .clu-dtabs { display: flex; gap: 3px; padding: 5px; diff --git a/app/resources/views/livewire/pages/settings/index.blade.php b/app/resources/views/livewire/pages/settings/index.blade.php index 7ea8fea..e25c82e 100644 --- a/app/resources/views/livewire/pages/settings/index.blade.php +++ b/app/resources/views/livewire/pages/settings/index.blade.php @@ -5,12 +5,22 @@ use Livewire\Attributes\Layout; use Livewire\Volt\Component; new #[Layout('layouts.app')] class extends Component { - public string $workspaceName = 'Acme Cluster'; - public string $workspaceSlug = 'acme-cluster'; - public string $description = 'WordPress fleet management for clients.'; + public string $workspaceName = ''; + public string $workspaceSlug = ''; + public string $description = ''; public string $region = 'eu-central-1'; public string $timezone = 'Europe/Berlin'; + public function mount(): void + { + $ws = auth()->user()?->currentWorkspace; + if ($ws) { + $this->workspaceName = $ws->name; + $this->workspaceSlug = $ws->slug; + $this->region = $ws->region ?? 'eu-central-1'; + } + } + public bool $emailNotifications = true; public bool $slackNotifications = false; public bool $weeklyDigest = true; diff --git a/app/resources/views/livewire/pages/sites/show.blade.php b/app/resources/views/livewire/pages/sites/show.blade.php index 38e977a..449ced3 100644 --- a/app/resources/views/livewire/pages/sites/show.blade.php +++ b/app/resources/views/livewire/pages/sites/show.blade.php @@ -467,20 +467,53 @@ new #[Layout('layouts.app')] class extends Component { - {{-- ── Tab bar ── --}} -
- @foreach (['overview' => ['Übersicht', ''], 'wp' => ['WordPress', ''], 'plugins' => ['Plugins', ''], 'redirects' => ['Redirects', ''], 'staging' => ['Staging', ''], 'vhost' => ['vHost', ''], 'ssl' => ['SSL / TLS', ''], 'access' => ['SSH / FTP', ''], 'php' => ['PHP / ini', ''], 'files' => ['Datei-Manager', ''], 'cron' => ['Cronjobs', ''], 'logs' => ['Logs', '']] as $key => [$label, $svg]) - - @endforeach -
+ {{-- ── Grouped Sub-Sidebar + Content ── --}} + @php + $sections = [ + 'ÜBERBLICK' => [ + 'overview' => ['Übersicht', ''], + ], + 'WORDPRESS' => [ + 'wp' => ['Einstellungen',''], + 'plugins' => ['Plugins', ''], + 'cron' => ['Cronjobs', '', $site->crons->count() ?: null], + 'redirects' => ['Redirects', ''], + ], + 'HOSTING' => [ + 'vhost' => ['vHost / nginx',''], + 'php' => ['PHP / ini', ''], + 'ssl' => ['SSL / TLS', ''], + 'files' => ['Datei-Manager',''], + 'staging' => ['Staging', ''], + ], + 'ZUGANG' => [ + 'access' => ['SSH / FTP', ''], + ], + 'BEOBACHTEN' => [ + 'logs' => ['Logs', ''], + ], + ]; + @endphp + +
+ + +
{{-- ────── OVERVIEW ────── --}} @if ($tab === 'overview') @@ -1506,4 +1539,7 @@ new #[Layout('layouts.app')] class extends Component {
@endif + + {{-- /clu-detail-content --}} + {{-- /clu-detail-layout --}}