68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-ghost-900 flex relative">
|
|
<!-- Background image at top - full page width -->
|
|
<div
|
|
class="absolute inset-x-0 pointer-events-none z-0"
|
|
style="
|
|
background-image: url("/background-dither.png");
|
|
background-size: 100% auto;
|
|
background-position: top center;
|
|
background-repeat: no-repeat;
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
"
|
|
/>
|
|
|
|
<!-- Mobile Header -->
|
|
<div
|
|
class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-ghost-900/95 backdrop-blur-md border-b border-ghost-700"
|
|
>
|
|
<div class="flex items-center justify-between p-4">
|
|
<NuxtLink
|
|
to="/"
|
|
class="text-lg font-bold text-white ethereal-text tracking-wider"
|
|
>
|
|
Ghost Guild
|
|
</NuxtLink>
|
|
<UButton
|
|
icon="i-lucide-menu"
|
|
color="neutral"
|
|
variant="ghost"
|
|
size="lg"
|
|
@click="isMobileMenuOpen = true"
|
|
aria-label="Open menu"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Column - Left -->
|
|
<div class="flex-1 overflow-y-auto relative z-[5]">
|
|
<div class="p-4 pt-20 md:p-8 md:pt-8 lg:p-16 max-w-4xl relative">
|
|
<slot />
|
|
</div>
|
|
<AppFooter />
|
|
</div>
|
|
|
|
<!-- Desktop Navigation Column - Right -->
|
|
<AppNavigation class="hidden lg:block relative z-20" />
|
|
|
|
<!-- Mobile Navigation Drawer -->
|
|
<USlideover v-model:open="isMobileMenuOpen" side="right">
|
|
<template #body>
|
|
<AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
|
|
</template>
|
|
</USlideover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const isMobileMenuOpen = ref(false);
|
|
</script>
|