Jennie Robinson Faber
fcd6f4cdf4
Migrate the entire admin section from the dark guild-* Tailwind theme to the zine design system (dashed borders, CSS custom properties, Brygada 1918 + Commit Mono, cream/dark mode palette). - Replace admin top-nav layout with sidebar matching default layout - Reskin dashboard, members, events, series management pages - Reskin events/create and series/create form pages - Add dev-only test login endpoint (GET /api/dev/test-login) - Redirect duplicate admin/dashboard.vue to /admin - Update CLAUDE.md design system docs
147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<template>
|
|
<div class="landing">
|
|
<!-- Horizontal Navigation -->
|
|
<nav class="landing-nav">
|
|
<div class="landing-nav-inner">
|
|
<NuxtLink to="/" class="landing-brand">Ghost Guild</NuxtLink>
|
|
<div class="landing-links">
|
|
<NuxtLink to="/about">About</NuxtLink>
|
|
<NuxtLink to="/events">Events</NuxtLink>
|
|
<template v-if="isAuthenticated">
|
|
<NuxtLink to="/member/dashboard" class="landing-cta">Dashboard</NuxtLink>
|
|
</template>
|
|
<template v-else>
|
|
<button class="landing-cta" @click="openLoginModal">Sign In</button>
|
|
</template>
|
|
</div>
|
|
<button class="btn landing-menu-btn" @click="isMobileMenuOpen = true">Menu</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- Mobile Navigation Drawer -->
|
|
<USlideover v-model:open="isMobileMenuOpen" side="right">
|
|
<template #body>
|
|
<div class="landing-mobile-nav">
|
|
<NuxtLink to="/about" @click="isMobileMenuOpen = false">About</NuxtLink>
|
|
<NuxtLink to="/events" @click="isMobileMenuOpen = false">Events</NuxtLink>
|
|
<template v-if="isAuthenticated">
|
|
<NuxtLink to="/member/dashboard" @click="isMobileMenuOpen = false">Dashboard</NuxtLink>
|
|
</template>
|
|
<template v-else>
|
|
<button @click="handleMobileSignIn">Sign In</button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</USlideover>
|
|
|
|
<LoginModal />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { isAuthenticated } = useAuth()
|
|
const { openLoginModal } = useLoginModal()
|
|
|
|
const isMobileMenuOpen = ref(false)
|
|
|
|
const handleMobileSignIn = () => {
|
|
isMobileMenuOpen.value = false
|
|
openLoginModal()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.landing {
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.landing-nav {
|
|
border-bottom: 1px dashed var(--border);
|
|
padding: 0 32px;
|
|
}
|
|
|
|
.landing-nav-inner {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.landing-brand {
|
|
font-family: 'Brygada 1918', serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--candle);
|
|
text-decoration: none;
|
|
}
|
|
.landing-brand:hover { text-decoration: none; }
|
|
|
|
.landing-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.landing-links a,
|
|
.landing-links button {
|
|
font-family: 'Commit Mono', monospace;
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
text-decoration: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: color 0.15s;
|
|
}
|
|
.landing-links a:hover,
|
|
.landing-links button:hover {
|
|
color: var(--text-bright);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.landing-cta {
|
|
color: var(--candle) !important;
|
|
}
|
|
|
|
.landing-menu-btn {
|
|
display: none;
|
|
}
|
|
|
|
.landing-mobile-nav {
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
.landing-mobile-nav a,
|
|
.landing-mobile-nav button {
|
|
font-family: 'Commit Mono', monospace;
|
|
font-size: 16px;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
.landing-mobile-nav a:hover,
|
|
.landing-mobile-nav button:hover {
|
|
color: var(--candle);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.landing-links { display: none; }
|
|
.landing-menu-btn { display: block; }
|
|
.landing-nav { padding: 0 20px; }
|
|
}
|
|
</style>
|