From dbb3fbbc1b4d140450e7b55f8e44af64eb796caf Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 2 Apr 2026 21:11:47 +0100
Subject: [PATCH] feat: replace layout with fixed left sidebar and top strip

---
 app/app.vue                      |   1 -
 app/components/AppNavigation.vue | 440 ++++++++++++++++---------------
 app/components/TopStrip.vue      |  42 +++
 app/layouts/default.vue          | 125 +++++----
 app/pages/index.vue              |   2 +-
 5 files changed, 342 insertions(+), 268 deletions(-)
 create mode 100644 app/components/TopStrip.vue

diff --git a/app/app.vue b/app/app.vue
index bba60e3..84d4ee0 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,6 +1,5 @@
 <template>
   <UApp>
-    <SvgFilters />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 0efc109..070611b 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -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>
diff --git a/app/components/TopStrip.vue b/app/components/TopStrip.vue
new file mode 100644
index 0000000..b29a90c
--- /dev/null
+++ b/app/components/TopStrip.vue
@@ -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">
+            &middot; {{ 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>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index f8ec29b..6eaedff 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,71 +1,84 @@
 <template>
-  <div class="min-h-screen bg-guild-900 relative">
-    <!-- Background image at top - full page width -->
-    <div
-      class="absolute inset-x-0 pointer-events-none z-0"
-      style="
-        background-image: url(&quot;/background-dither.webp&quot;);
-        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%
-        );
-      "
-    />
+  <div class="site">
+    <!-- Desktop Sidebar -->
+    <AppNavigation class="sidebar-desktop" />
 
     <!-- Mobile Header -->
-    <div
-      class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-guild-900/95 backdrop-blur-md border-b border-guild-700"
-    >
-      <div class="flex items-center justify-between p-4">
-        <NuxtLink
-          to="/"
-          class="text-display-sm font-bold text-candlelight-400 warm-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 class="mobile-header">
+      <NuxtLink to="/" class="brand">Ghost Guild</NuxtLink>
+      <button class="btn" @click="isMobileMenuOpen = true">Menu</button>
     </div>
 
-    <!-- Container to center content and sidebar together -->
-    <div class="lg:flex lg:justify-center lg:gap-0">
-      <!-- Main Content Column -->
-      <div class="lg:w-[800px] overflow-y-auto relative z-[5] guild-interior">
-        <div class="relative">
-          <slot />
-        </div>
-        <AppFooter />
-      </div>
+    <!-- Main Content -->
+    <main class="main">
+      <TopStrip :page-path="currentPageName" />
+      <slot />
+    </main>
 
-      <!-- Desktop Navigation Column -->
-      <AppNavigation class="hidden lg:block relative z-20" />
-    </div>
-
-    <!-- Mobile Navigation Drawer -->
-    <USlideover v-model:open="isMobileMenuOpen" side="right">
+    <!-- Mobile Drawer -->
+    <USlideover v-model:open="isMobileMenuOpen" side="left">
       <template #body>
         <AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
       </template>
     </USlideover>
+
   </div>
 </template>
 
 <script setup>
-const isMobileMenuOpen = ref(false);
+const isMobileMenuOpen = ref(false)
+const route = useRoute()
+
+const currentPageName = computed(() => {
+  const path = route.path
+  if (path === '/') return ''
+  // Convert /member/dashboard → member / dashboard
+  return path.slice(1).replace(/\//g, ' / ')
+})
 </script>
+
+<style scoped>
+.site {
+  min-height: 100vh;
+}
+
+.main {
+  margin-left: 220px;
+}
+
+.sidebar-desktop {
+  display: block;
+}
+
+.mobile-header {
+  display: none;
+}
+
+.brand {
+  font-family: 'Brygada 1918', serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--candle);
+  text-decoration: none;
+}
+
+@media (max-width: 768px) {
+  .sidebar-desktop {
+    display: none;
+  }
+  .mobile-header {
+    display: flex;
+    padding: 12px 20px;
+    border-bottom: 1px dashed var(--border);
+    align-items: center;
+    justify-content: space-between;
+    background: var(--bg);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+  }
+  .main {
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 19c43c6..125a162 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -148,7 +148,7 @@
 import { getCircleOptions } from "~/config/circles";
 
 definePageMeta({
-  layout: "landing",
+  layout: "default",
 });
 
 const circles = getCircleOptions();