790b5e5c24
The pages/lyra.vue page (create community posts as Lyra/ReBreak, AI-generated or manual) existed but wasn't linked anywhere. Adds it to the sidebar + mobile bottom-tab (grid-cols-5→6) and the dashboard quick-links grid (lg:grid-cols-4→5). Admin app stays team-internal (stats / users / domain approval / social posts / moderation) — no relation to the RN app. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
127 lines
4.1 KiB
Vue
127 lines
4.1 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-950 text-gray-100">
|
|
<!-- Topbar (Desktop + Mobile) -->
|
|
<header class="border-b border-gray-800 bg-gray-900 px-4 py-3 flex items-center justify-between lg:px-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-sm font-semibold tracking-wide text-gray-400 uppercase">rebreak</span>
|
|
<span class="text-gray-600">/</span>
|
|
<span class="text-sm font-medium text-white">Admin</span>
|
|
</div>
|
|
|
|
<!-- Desktop: Email + Logout-Button sichtbar -->
|
|
<div class="hidden lg:flex items-center gap-4">
|
|
<span class="text-xs text-gray-500">{{ adminEmail }}</span>
|
|
<UButton
|
|
size="xs"
|
|
color="neutral"
|
|
variant="ghost"
|
|
label="Logout"
|
|
@click="logout"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Mobile: Dropdown-Menu fuer Logout/Email -->
|
|
<UDropdownMenu :items="mobileMenuItems" :popper="{ placement: 'bottom-end' }">
|
|
<UButton
|
|
icon="heroicons:bars-3"
|
|
size="sm"
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="lg:hidden"
|
|
aria-label="Menu"
|
|
/>
|
|
</UDropdownMenu>
|
|
</header>
|
|
|
|
<!-- Sidebar (Desktop) + Content -->
|
|
<div class="flex flex-col lg:flex-row">
|
|
<!-- Sidebar nur Desktop -->
|
|
<aside class="hidden lg:block w-56 min-h-[calc(100vh-49px)] border-r border-gray-800 bg-gray-900 py-4">
|
|
<nav class="flex flex-col gap-1 px-3">
|
|
<NuxtLink
|
|
v-for="item in nav"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="flex items-center gap-2 rounded px-3 py-2 text-sm text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
|
|
active-class="bg-gray-800 text-white"
|
|
>
|
|
<UIcon :name="item.icon" class="h-4 w-4 shrink-0" />
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Content -->
|
|
<main class="flex-1 p-4 lg:p-6 pb-24 lg:pb-6">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Bottom-Tab-Bar (Mobile only) -->
|
|
<nav
|
|
class="lg:hidden fixed bottom-0 inset-x-0 z-40 border-t border-gray-800 bg-gray-950/95 backdrop-blur"
|
|
:style="{ paddingBottom: 'env(safe-area-inset-bottom)' }"
|
|
>
|
|
<ul class="grid grid-cols-6">
|
|
<li v-for="item in nav" :key="item.to">
|
|
<NuxtLink
|
|
:to="item.to"
|
|
class="flex flex-col items-center justify-center gap-1 py-2 text-gray-500 transition-colors"
|
|
:class="isActive(item.to)
|
|
? 'text-white bg-gray-800'
|
|
: 'hover:text-gray-300'"
|
|
>
|
|
<UIcon :name="item.icon" class="h-5 w-5" />
|
|
<span class="text-[10px] font-medium leading-none">{{ item.shortLabel }}</span>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { adminEmail, logout } = useAdminAuth()
|
|
const route = useRoute()
|
|
|
|
interface NavItem {
|
|
to: string
|
|
label: string
|
|
shortLabel: string
|
|
icon: string
|
|
}
|
|
|
|
const nav: NavItem[] = [
|
|
{ to: "/", label: "Dashboard", shortLabel: "Home", icon: "heroicons:home" },
|
|
{ to: "/domains", label: "Domain-Approval", shortLabel: "Domains", icon: "heroicons:globe-alt" },
|
|
{ to: "/users", label: "User-Management", shortLabel: "Users", icon: "heroicons:users" },
|
|
{ to: "/stats", label: "Statistiken", shortLabel: "Stats", icon: "heroicons:chart-bar" },
|
|
{ to: "/moderation", label: "Moderation", shortLabel: "Mod", icon: "heroicons:flag" },
|
|
{ to: "/lyra", label: "Lyra-Posts", shortLabel: "Lyra", icon: "heroicons:sparkles" },
|
|
]
|
|
|
|
// Active-State: exact match fuer "/", startsWith fuer Sub-Routes
|
|
function isActive(to: string): boolean {
|
|
if (to === "/") return route.path === "/"
|
|
return route.path === to || route.path.startsWith(`${to}/`)
|
|
}
|
|
|
|
// Mobile-Dropdown-Menu (Header oben rechts)
|
|
const mobileMenuItems = computed(() => [
|
|
[
|
|
{
|
|
label: adminEmail.value || "Admin",
|
|
icon: "heroicons:user-circle",
|
|
disabled: true,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
label: "Logout",
|
|
icon: "heroicons:arrow-right-on-rectangle",
|
|
onSelect: () => logout(),
|
|
},
|
|
],
|
|
])
|
|
</script>
|