UI/UX tweaks and improvements.

app/components/AppNavigation.vue

@@ -17,7 +17,13 @@
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
-              >{{ item.label }}</NuxtLink>
+                >{{ item.label }}</NuxtLink
+              >
+            </li>
+            <li>
+              <a href="#" class="sign-out" @click.prevent="handleLogout"
+                >Sign out</a
+              >
             </li>
           </ul>
 
@@ -28,18 +34,8 @@
                 :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>
+                >{{ item.label }}</NuxtLink
+              >
             </li>
           </ul>
         </template>
@@ -53,7 +49,8 @@
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
-              >{{ item.label }}</NuxtLink>
+                >{{ item.label }}</NuxtLink
+              >
             </li>
           </ul>
 
@@ -64,7 +61,8 @@
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
-              >{{ item.label }}</NuxtLink>
+                >{{ item.label }}</NuxtLink
+              >
             </li>
           </ul>
         </template>
@@ -78,7 +76,8 @@
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
-              >{{ item.label }}</NuxtLink>
+                >{{ item.label }}</NuxtLink
+              >
             </li>
           </ul>
 
@@ -89,7 +88,8 @@
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
-              >{{ item.label }}</NuxtLink>
+                >{{ item.label }}</NuxtLink
+              >
             </li>
           </ul>
         </template>
@@ -99,29 +99,18 @@
     <!-- Meta at bottom -->
     <div class="sidebar-meta">
       <ClientOnly>
-        <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>
-
+        Part of
+        <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br />
+        A Canadian nonprofit
         <template #fallback>
-          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>
+          Part of
+          <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a
+          ><br />
+          A Canadian nonprofit
         </template>
       </ClientOnly>
       <ClientOnly>
+        <DevLoginPanel v-if="isDev" />
         <ColorModeToggle />
       </ClientOnly>
     </div>
@@ -134,68 +123,59 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
+});
 
-const emit = defineEmits(['navigate'])
+const emit = defineEmits(["navigate"]);
 
-const route = useRoute()
-const { isAuthenticated, logout, memberData } = useAuth()
-const { openLoginModal } = useLoginModal()
+const route = useRoute();
+const { isAuthenticated, logout } = useAuth();
+const isDev = import.meta.dev;
 
 const handleNavigate = () => {
   if (props.isMobile) {
-    emit('navigate')
+    emit("navigate");
   }
-}
+};
 
 const handleLogout = async () => {
-  await logout()
-  handleNavigate()
-}
-
-const openLogin = () => {
-  openLoginModal()
-  handleNavigate()
-}
+  await logout();
+  handleNavigate();
+  navigateTo("/");
+};
 
 const isActive = (path) => {
-  if (path === '/') return route.path === '/'
-  return route.path.startsWith(path)
-}
+  if (path === "/") return route.path === "/";
+  return route.path.startsWith(path);
+};
 
 // Public nav items
 const publicItems = [
-  { label: 'Home', path: '/' },
-  { label: 'About', path: '/about' },
-  { label: 'Events', path: '/events' },
-  { label: 'Members', path: '/members' },
-  { label: 'Wiki', path: '/wiki' },
-]
+  { label: "Home", path: "/" },
+  { label: "About", path: "/about" },
+  { label: "Events", path: "/events" },
+  { label: "Members", path: "/members" },
+  { label: "Wiki", path: "https://wiki.ghostguild.org" },
+];
 
 const joinItems = [
-  { label: 'Become a member', path: '/join' },
-  { label: 'Propose an event', path: '/events' },
-]
+  { label: "Become a member", path: "/join" },
+  { label: "Propose an event", path: "/events" },
+];
 
 // 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' },
-]
+  { label: "Dashboard", path: "/member/dashboard" },
+  { label: "Profile", path: "/member/profile" },
+  { label: "Account", path: "/member/account" },
+  { label: "My Updates", path: "/member/my-updates" },
+];
 
 const exploreItems = [
-  { label: 'Events', path: '/events' },
-  { label: 'Members', path: '/members' },
-  { label: 'Wiki', path: '/wiki' },
-  { label: 'About', path: '/about' },
-]
-
-const communityItems = [
-  { label: 'Peer Support', path: '/members' },
-  { label: 'Propose an Event', path: '/events' },
-]
+  { label: "Events", path: "/events" },
+  { label: "Members", path: "/members" },
+  { label: "Wiki", path: "/wiki" },
+  { label: "About", path: "/about" },
+];
 </script>
 
 <style scoped>
@@ -221,12 +201,14 @@ const communityItems = [
 }
 
 .sidebar-brand {
-  display: block;
-  font-family: 'Brygada 1918', serif;
+  display: flex;
+  align-items: center;
+  font-family: "Brygada 1918", serif;
   font-size: 16px;
   font-weight: 600;
   color: var(--candle);
-  padding: 24px 24px 16px;
+  padding: 0 24px;
+  height: 53px;
   border-bottom: 1px dashed var(--border);
   text-decoration: none;
 }
@@ -237,6 +219,7 @@ const communityItems = [
 .sidebar-body {
   flex: 1;
   overflow-y: auto;
+  padding-bottom: 16px;
 }
 
 .sidebar-section {
@@ -267,6 +250,11 @@ const communityItems = [
   text-decoration: none;
 }
 
+.sidebar-nav a.sign-out {
+  color: var(--text-faint);
+  margin-top: 4px;
+}
+
 .sidebar-nav a:hover {
   color: var(--text);
   background: var(--surface);
@@ -290,15 +278,4 @@ const communityItems = [
 .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>