feat: Make menu context-aware and hide current page links
Implement intelligent menu filtering that hides self-referencing links and shows all applicable pages based on user role and authentication state. Changes: - Menu component now uses currentPath to filter out the current page link - Added computed properties to detect which page user is on - Fixed profile, admin, and users pages to dynamically detect admin status from API - Added menu to forgot-password page for consistent navigation - All pages now pass correct authentication state to Menu component This ensures menus always show relevant navigation options while avoiding redundant links to the current page. Admin users now see all admin options (Manage Sermons, Manage Users) regardless of which page they're on, except the current one. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,26 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50 flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="bg-white shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<NuxtLink to="/">
|
||||
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
|
||||
</NuxtLink>
|
||||
<ClientOnly fallback-tag="div">
|
||||
<Menu
|
||||
:is-authenticated="isAuthenticated"
|
||||
:is-admin="isAdmin"
|
||||
:show-home="true"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center px-4">
|
||||
<div class="max-w-md w-full">
|
||||
<div class="text-center mb-8">
|
||||
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4" />
|
||||
<h2 class="text-3xl font-bold text-gray-900">Reset Password</h2>
|
||||
<p class="mt-2 text-sm text-gray-600">{{ stepMessage }}</p>
|
||||
</div>
|
||||
@@ -171,6 +188,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Check authentication status
|
||||
const { data: authData } = await useFetch('/api/auth/verify')
|
||||
const isAuthenticated = computed(() => authData.value?.authenticated || false)
|
||||
const isAdmin = computed(() => authData.value?.isAdmin || false)
|
||||
|
||||
const email = ref('')
|
||||
const code = ref('')
|
||||
const newPassword = ref('')
|
||||
|
||||
Reference in New Issue
Block a user