Jennie Robinson Faber
a62e167876
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens. Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components, layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild class, and warm texture effects. Clean up stale documentation files.
131 lines
3.8 KiB
Vue
131 lines
3.8 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-guild-900">
|
|
<!-- Horizontal Navigation -->
|
|
<nav class="w-full px-6 md:px-8 py-4">
|
|
<div class="max-w-6xl mx-auto flex items-center justify-between">
|
|
<!-- Logo/Wordmark -->
|
|
<NuxtLink to="/" class="text-xl font-bold text-primary-400 tracking-wide">
|
|
Ghost Guild
|
|
</NuxtLink>
|
|
|
|
<!-- Desktop Navigation Links -->
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<NuxtLink
|
|
to="/about"
|
|
class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
|
|
>
|
|
About
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/events"
|
|
class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
|
|
>
|
|
Events
|
|
</NuxtLink>
|
|
<template v-if="isAuthenticated">
|
|
<NuxtLink
|
|
to="/member/dashboard"
|
|
class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
|
|
>
|
|
Dashboard
|
|
</NuxtLink>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
@click="openLoginModal"
|
|
class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
|
|
>
|
|
Sign In
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<UButton
|
|
icon="i-lucide-menu"
|
|
color="neutral"
|
|
variant="ghost"
|
|
size="md"
|
|
class="md:hidden"
|
|
@click="isMobileMenuOpen = true"
|
|
aria-label="Open menu"
|
|
/>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-guild-800 py-8 px-6 md:px-8">
|
|
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p class="text-guild-500 text-sm">
|
|
© {{ currentYear }} Ghost Guild
|
|
</p>
|
|
<a
|
|
href="mailto:hello@ghostguild.org"
|
|
class="text-guild-500 hover:text-guild-300 transition-colors text-sm"
|
|
>
|
|
hello@ghostguild.org
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Mobile Navigation Drawer -->
|
|
<USlideover v-model:open="isMobileMenuOpen" side="right">
|
|
<template #body>
|
|
<div class="p-6 space-y-6">
|
|
<NuxtLink
|
|
to="/about"
|
|
class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
|
|
@click="isMobileMenuOpen = false"
|
|
>
|
|
About
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/events"
|
|
class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
|
|
@click="isMobileMenuOpen = false"
|
|
>
|
|
Events
|
|
</NuxtLink>
|
|
<template v-if="isAuthenticated">
|
|
<NuxtLink
|
|
to="/member/dashboard"
|
|
class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
|
|
@click="isMobileMenuOpen = false"
|
|
>
|
|
Dashboard
|
|
</NuxtLink>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
@click="handleMobileSignIn"
|
|
class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
|
|
>
|
|
Sign In
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</USlideover>
|
|
|
|
<!-- Login Modal -->
|
|
<LoginModal />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { isAuthenticated } = useAuth()
|
|
const { openLoginModal } = useLoginModal()
|
|
|
|
const isMobileMenuOpen = ref(false)
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
const handleMobileSignIn = () => {
|
|
isMobileMenuOpen.value = false
|
|
openLoginModal()
|
|
}
|
|
</script>
|