Enhance Navbar component to include conditional rendering for the user appointment details route. This update improves navigation clarity for authenticated users by ensuring appropriate links are displayed based on the current route.

This commit is contained in:
iamkiddy 2025-12-04 19:46:24 +00:00
parent c18275bf9b
commit 212ac70b5d

View File

@ -26,6 +26,7 @@ export function Navbar() {
const isAdminDashboard = pathname?.startsWith("/admin/dashboard"); const isAdminDashboard = pathname?.startsWith("/admin/dashboard");
const isUserSettings = pathname?.startsWith("/user/settings"); const isUserSettings = pathname?.startsWith("/user/settings");
const isAdminSettings = pathname?.startsWith("/admin/settings"); const isAdminSettings = pathname?.startsWith("/admin/settings");
const isUserAppointmentDetails = pathname?.startsWith("/user/appointments/");
const isUserRoute = pathname?.startsWith("/user/"); const isUserRoute = pathname?.startsWith("/user/");
const { isAuthenticated, logout, user, isAdmin } = useAuth(); const { isAuthenticated, logout, user, isAdmin } = useAuth();
@ -142,7 +143,7 @@ export function Navbar() {
)} )}
{isAuthenticated && ( {isAuthenticated && (
<> <>
{!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings) && ( {!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings || isUserAppointmentDetails) && (
<Link <Link
href={isAdmin ? "/admin/dashboard" : "/user/dashboard"} href={isAdmin ? "/admin/dashboard" : "/user/dashboard"}
className={`text-sm font-medium transition-colors cursor-pointer px-3 py-2 rounded-lg hover:opacity-90 ${isDark ? 'text-gray-300 hover:text-white' : 'text-gray-700 hover:text-rose-600'}`} className={`text-sm font-medium transition-colors cursor-pointer px-3 py-2 rounded-lg hover:opacity-90 ${isDark ? 'text-gray-300 hover:text-white' : 'text-gray-700 hover:text-rose-600'}`}
@ -258,7 +259,7 @@ export function Navbar() {
)} )}
{isAuthenticated && ( {isAuthenticated && (
<> <>
{!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings) && ( {!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings || isUserAppointmentDetails) && (
<Link <Link
href={isAdmin ? "/admin/dashboard" : "/user/dashboard"} href={isAdmin ? "/admin/dashboard" : "/user/dashboard"}
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}