Initialer Laravel Commit für BetiX

resources/js/layouts/admin/AdminLayout.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { computed, onMounted, nextTick } from 'vue';
+
+const page = usePage();
+const user = computed(() => (page.props as any).auth?.user || null);
+
+onMounted(() => {
+  nextTick(() => { if ((window as any).lucide) (window as any).lucide.createIcons(); });
+});
+</script>
+
+<template>
+  <div class="admin-layout">
+    <aside class="sidebar">
+      <div class="brand">
+        <i data-lucide="shield"></i>
+        <span>Admin</span>
+      </div>
+      <nav class="nav">
+        <Link href="/admin" class="nav-item" :class="{ active: $page.url === '/admin' }">
+          <i data-lucide="layout-dashboard"></i>
+          <span>Dashboard</span>
+        </Link>
+        <div class="nav-label">Wallets</div>
+        <Link href="/admin/wallets/settings" class="nav-item" :class="{ active: $page.url.startsWith('/admin/wallets/settings') }">
+          <i data-lucide="settings"></i>
+          <span>Einstellungen</span>
+        </Link>
+        <Link href="/admin/payments/settings" class="nav-item" :class="{ active: $page.url.startsWith('/admin/payments/settings') }">
+          <i data-lucide="credit-card"></i>
+          <span>Zahlungen</span>
+        </Link>
+        <div class="nav-label">Weitere</div>
+        <Link href="/admin/promos" class="nav-item" :class="{ active: $page.url.startsWith('/admin/promos') }">
+          <i data-lucide="gift"></i>
+          <span>Promos</span>
+        </Link>
+        <Link href="/admin/support" class="nav-item" :class="{ active: $page.url.startsWith('/admin/support') }">
+          <i data-lucide="message-square"></i>
+          <span>Support</span>
+        </Link>
+      </nav>
+      <div class="sidebar-foot">
+        <div class="user">
+          <i data-lucide="user"></i>
+          <span>{{ user?.username || user?.name || 'Admin' }}</span>
+        </div>
+        <Link href="/" class="back-link"><i data-lucide="arrow-left"></i> Zurück</Link>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div class="title"><slot name="title">Admin</slot></div>
+        <div class="actions"><slot name="actions" /></div>
+      </header>
+      <div class="container">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: #0b0b0c; color: #e5e7eb; }
+.sidebar { background: #0f0f10; border-right: 1px solid #1f1f22; display: flex; flex-direction: column; }
+.brand { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 800; letter-spacing: .5px; border-bottom: 1px solid #1f1f22; }
+.brand i { width: 18px; height: 18px; }
+.nav { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
+.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #cbd5e1; text-decoration: none; }
+.nav-item i { width: 18px; height: 18px; }
+.nav-item:hover { background: #151518; color: #fff; }
+.nav-item.active { background: #1b1b20; color: #fff; border: 1px solid #23232a; }
+.nav-label { font-size: 11px; color: #9ca3af; font-weight: 700; padding: 8px 12px 0; text-transform: uppercase; letter-spacing: 1px; }
+.sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid #1f1f22; display: grid; gap: 8px; }
+.user { display: flex; align-items: center; gap: 8px; color: #9ca3af; }
+.back-link { color: #cbd5e1; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
+.back-link:hover { color: #fff; }
+.main { display: flex; flex-direction: column; }
+.topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #1f1f22; background: #0f0f10; }
+.title { font-weight: 800; }
+.container { padding: 16px; }
+@media (max-width: 960px) {
+  .admin-layout { grid-template-columns: 1fr; }
+  .sidebar { display: none; }
+}
+</style>