feat: replace layout with fixed left sidebar and top strip
This commit is contained in:
parent
238d68d063
commit
dbb3fbbc1b
5 changed files with 342 additions and 268 deletions
|
|
@ -1,246 +1,266 @@
|
|||
<template>
|
||||
<nav
|
||||
:class="[
|
||||
isMobile
|
||||
? 'w-full flex flex-col bg-transparent'
|
||||
: 'w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col bg-guild-900 border-r border-guild-700',
|
||||
]"
|
||||
>
|
||||
<!-- Logo/Brand at top (desktop only) -->
|
||||
<!-- Logo/Brand: designer will replace text with logo asset -->
|
||||
<div v-if="!isMobile" class="p-8 border-b border-guild-700 bg-guild-900">
|
||||
<NuxtLink to="/" class="flex flex-col items-center gap-3 group">
|
||||
<slot name="logo">
|
||||
<span class="text-display-sm font-bold text-candlelight-400 warm-text tracking-wider"
|
||||
>Ghost Guild</span
|
||||
>
|
||||
</slot>
|
||||
</NuxtLink>
|
||||
<aside :class="isMobile ? 'sidebar sidebar-mobile' : 'sidebar'">
|
||||
<!-- Brand -->
|
||||
<NuxtLink to="/" class="sidebar-brand" @click="handleNavigate">
|
||||
Ghost Guild
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Navigation sections -->
|
||||
<div class="sidebar-body">
|
||||
<template v-if="isAuthenticated">
|
||||
<!-- Logged-in nav -->
|
||||
<div class="sidebar-section">You</div>
|
||||
<ul class="sidebar-nav">
|
||||
<li v-for="item in youItems" :key="item.path">
|
||||
<NuxtLink
|
||||
:to="item.path"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
@click="handleNavigate"
|
||||
>{{ item.label }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="sidebar-section">Explore</div>
|
||||
<ul class="sidebar-nav">
|
||||
<li v-for="item in exploreItems" :key="item.path">
|
||||
<NuxtLink
|
||||
:to="item.path"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
@click="handleNavigate"
|
||||
>{{ item.label }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="sidebar-section">Community</div>
|
||||
<ul class="sidebar-nav">
|
||||
<li v-for="item in communityItems" :key="item.path">
|
||||
<NuxtLink
|
||||
:to="item.path"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
@click="handleNavigate"
|
||||
>{{ item.label }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- Public nav -->
|
||||
<div class="sidebar-section">Navigate</div>
|
||||
<ul class="sidebar-nav">
|
||||
<li v-for="item in publicItems" :key="item.path">
|
||||
<NuxtLink
|
||||
:to="item.path"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
@click="handleNavigate"
|
||||
>{{ item.label }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="sidebar-section">Join</div>
|
||||
<ul class="sidebar-nav">
|
||||
<li v-for="item in joinItems" :key="item.path">
|
||||
<NuxtLink
|
||||
:to="item.path"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
@click="handleNavigate"
|
||||
>{{ item.label }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Vertical Navigation -->
|
||||
<div
|
||||
:class="
|
||||
isMobile ? 'flex-1 p-6 overflow-y-auto' : 'flex-1 p-8 overflow-y-auto'
|
||||
"
|
||||
>
|
||||
<ul :class="isMobile ? 'space-y-4' : 'space-y-6'">
|
||||
<li v-for="item in navigationItems" :key="item.path">
|
||||
<NuxtLink
|
||||
:to="item.path"
|
||||
class="block group relative"
|
||||
@click="handleNavigate"
|
||||
>
|
||||
<!-- Hover indicator -->
|
||||
|
||||
<span
|
||||
class="text-guild-200 hover:text-guild-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:warm-text"
|
||||
active-class="text-guild-100 warm-text translate-x-2"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Contact Email -->
|
||||
<div class="mt-8 pt-6 border-t border-guild-800/50">
|
||||
<p class="text-guild-500 text-xs">
|
||||
Contact us:
|
||||
<a
|
||||
href="mailto:hello@ghostguild.org"
|
||||
class="text-guild-400 hover:text-guild-300 transition-colors"
|
||||
>hello@ghostguild.org</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Color Mode Switcher -->
|
||||
<div class="mb-6">
|
||||
<UColorModeButton size="md" class="w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Auth section -->
|
||||
<div
|
||||
:class="
|
||||
isMobile
|
||||
? 'mt-8 pt-6 border-t border-guild-800/50'
|
||||
: 'mt-12 pt-8 border-t border-guild-800/50'
|
||||
"
|
||||
>
|
||||
<div v-if="isAuthenticated" class="space-y-4">
|
||||
<NuxtLink
|
||||
to="/member/dashboard"
|
||||
class="block text-guild-300 hover:text-guild-100 hover:warm-text transition-all duration-300 py-2"
|
||||
@click="handleNavigate"
|
||||
>
|
||||
<span class="block text-sm text-candlelight-400 mb-1">{{
|
||||
memberData?.name || "Member"
|
||||
}}</span>
|
||||
Dashboard
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="text-guild-500 hover:text-guild-300 transition-all duration-300 text-sm"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<p class="text-guild-400 text-sm mb-4">
|
||||
Enter your email to receive a login link
|
||||
</p>
|
||||
|
||||
<UForm :state="loginForm" @submit="handleLogin">
|
||||
<UFormField name="email">
|
||||
<UInput
|
||||
v-model="loginForm.email"
|
||||
type="email"
|
||||
size="md"
|
||||
placeholder="your.email@example.com"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
:loading="isLoggingIn"
|
||||
:disabled="!isLoginFormValid"
|
||||
size="md"
|
||||
class="w-full mt-3"
|
||||
>
|
||||
Send Magic Link
|
||||
</UButton>
|
||||
</UForm>
|
||||
|
||||
<div
|
||||
v-if="loginSuccess"
|
||||
class="p-3 bg-candlelight-900/20 rounded border border-candlelight-800"
|
||||
>
|
||||
<p class="text-candlelight-400 text-sm">Check your email!</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="loginError"
|
||||
class="p-3 bg-ember-900/20 rounded border border-ember-800"
|
||||
>
|
||||
<p class="text-ember-400 text-sm">{{ loginError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meta at bottom -->
|
||||
<div class="sidebar-meta">
|
||||
<template v-if="isAuthenticated">
|
||||
<span class="member-name">{{ memberData?.name || 'Member' }}</span><br>
|
||||
<span
|
||||
v-if="memberData?.circle"
|
||||
class="member-circle"
|
||||
:style="{ color: `var(--c-${memberData.circle})` }"
|
||||
>{{ memberData.circle }}</span>
|
||||
<br v-if="memberData?.circle">
|
||||
<a href="#" @click.prevent="handleLogout">Sign out</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
|
||||
A Canadian nonprofit<br>
|
||||
<a href="#" @click.prevent="openLogin">Sign in</a>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
isMobile: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const emit = defineEmits(["navigate"]);
|
||||
const emit = defineEmits(['navigate'])
|
||||
|
||||
const { isAuthenticated, logout, memberData } = useAuth();
|
||||
const route = useRoute()
|
||||
const { isAuthenticated, logout, memberData } = useAuth()
|
||||
const { openLoginModal } = useLoginModal()
|
||||
|
||||
const handleNavigate = () => {
|
||||
if (props.isMobile) {
|
||||
emit("navigate");
|
||||
emit('navigate')
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
if (props.isMobile) {
|
||||
emit("navigate");
|
||||
}
|
||||
};
|
||||
await logout()
|
||||
handleNavigate()
|
||||
}
|
||||
|
||||
const publicNavigationItems = [
|
||||
{ label: "Home", path: "/", accent: "entry point" },
|
||||
{ label: "About", path: "/about", accent: "who we are" },
|
||||
{ label: "Events", path: "/events", accent: "gatherings" },
|
||||
{ label: "Join", path: "/join", accent: "become one" },
|
||||
];
|
||||
const openLogin = () => {
|
||||
openLoginModal()
|
||||
handleNavigate()
|
||||
}
|
||||
|
||||
const memberNavigationItems = [
|
||||
{ label: "Dashboard", path: "/member/dashboard" },
|
||||
{ label: "Events", path: "/events" },
|
||||
{ label: "Members", path: "/members" },
|
||||
{ label: "Resources", path: "/resources" },
|
||||
{ label: "Profile", path: "/member/profile" },
|
||||
];
|
||||
const isActive = (path) => {
|
||||
if (path === '/') return route.path === '/'
|
||||
return route.path.startsWith(path)
|
||||
}
|
||||
|
||||
const navigationItems = computed(() =>
|
||||
isAuthenticated.value ? memberNavigationItems : publicNavigationItems,
|
||||
);
|
||||
// Public nav items
|
||||
const publicItems = [
|
||||
{ label: 'Home', path: '/' },
|
||||
{ label: 'About', path: '/about' },
|
||||
{ label: 'Events', path: '/events' },
|
||||
{ label: 'Members', path: '/members' },
|
||||
{ label: 'Wiki', path: '/wiki' },
|
||||
]
|
||||
|
||||
// Login form state
|
||||
const loginForm = reactive({
|
||||
email: "",
|
||||
});
|
||||
const joinItems = [
|
||||
{ label: 'Become a member', path: '/join' },
|
||||
{ label: 'Propose an event', path: '/events' },
|
||||
]
|
||||
|
||||
const isLoggingIn = ref(false);
|
||||
const loginSuccess = ref(false);
|
||||
const loginError = ref("");
|
||||
// Logged-in nav items
|
||||
const youItems = [
|
||||
{ label: 'Dashboard', path: '/member/dashboard' },
|
||||
{ label: 'Profile', path: '/member/profile' },
|
||||
{ label: 'Account', path: '/member/account' },
|
||||
{ label: 'My Updates', path: '/member/my-updates' },
|
||||
]
|
||||
|
||||
const isLoginFormValid = computed(() => {
|
||||
return loginForm.email && loginForm.email.includes("@");
|
||||
});
|
||||
const exploreItems = [
|
||||
{ label: 'Events', path: '/events' },
|
||||
{ label: 'Members', path: '/members' },
|
||||
{ label: 'Wiki', path: '/wiki' },
|
||||
{ label: 'About', path: '/about' },
|
||||
]
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (isLoggingIn.value) return;
|
||||
|
||||
isLoggingIn.value = true;
|
||||
loginError.value = "";
|
||||
loginSuccess.value = false;
|
||||
|
||||
try {
|
||||
const response = await $fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: {
|
||||
email: loginForm.email,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
loginSuccess.value = true;
|
||||
loginError.value = "";
|
||||
loginForm.email = "";
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Login error:", err);
|
||||
|
||||
if (err.statusCode === 500) {
|
||||
loginError.value = "Failed to send email";
|
||||
} else {
|
||||
loginError.value = "Something went wrong";
|
||||
}
|
||||
} finally {
|
||||
isLoggingIn.value = false;
|
||||
}
|
||||
};
|
||||
const communityItems = [
|
||||
{ label: 'Peer Support', path: '/members' },
|
||||
{ label: 'Propose an Event', path: '/events' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px) rotate(10deg);
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 220px;
|
||||
padding: 0;
|
||||
border-right: 1px dashed var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.delay-75 {
|
||||
animation-delay: 75ms;
|
||||
.sidebar-mobile {
|
||||
position: static;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.delay-150 {
|
||||
animation-delay: 150ms;
|
||||
.sidebar-brand {
|
||||
display: block;
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--candle);
|
||||
padding: 24px 24px 16px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
text-decoration: none;
|
||||
}
|
||||
.sidebar-brand:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-faint);
|
||||
margin: 20px 0 8px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.sidebar-nav li {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sidebar-nav a {
|
||||
display: block;
|
||||
padding: 6px 10px;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-nav a:hover {
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-nav a.active {
|
||||
color: var(--text-bright);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.sidebar-meta {
|
||||
margin-top: auto;
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
line-height: 1.7;
|
||||
padding: 16px 24px 24px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.sidebar-meta a {
|
||||
color: var(--candle-dim);
|
||||
}
|
||||
|
||||
.member-name {
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.member-circle {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
42
app/components/TopStrip.vue
Normal file
42
app/components/TopStrip.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="top-strip">
|
||||
<span>
|
||||
<slot name="left">ghostguild.org{{ pagePath ? ` / ${pagePath}` : '' }}</slot>
|
||||
</span>
|
||||
<span>
|
||||
<slot name="right">
|
||||
<template v-if="memberData">
|
||||
Signed in as {{ memberData.name }}
|
||||
<template v-if="memberData.circle">
|
||||
· {{ memberData.circle }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
A cooperative for game developers
|
||||
</template>
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
pagePath: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const { memberData } = useAuth()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.top-strip {
|
||||
padding: 16px 32px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.top-strip a { color: var(--text-faint); }
|
||||
.top-strip a:hover { color: var(--candle); }
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue