Update Navbar component to conditionally render Dashboard links based on user roles and current route. This enhancement improves navigation clarity for authenticated users by preventing duplicate links in the Navbar.

This commit is contained in:
iamkiddy 2025-12-04 19:44:27 +00:00
parent 460901ab5c
commit c18275bf9b

View File

@ -23,7 +23,9 @@ export function Navbar() {
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const isUserDashboard = pathname?.startsWith("/user/dashboard"); const isUserDashboard = pathname?.startsWith("/user/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 isUserRoute = pathname?.startsWith("/user/"); const isUserRoute = pathname?.startsWith("/user/");
const { isAuthenticated, logout, user, isAdmin } = useAuth(); const { isAuthenticated, logout, user, isAdmin } = useAuth();
@ -140,6 +142,7 @@ export function Navbar() {
)} )}
{isAuthenticated && ( {isAuthenticated && (
<> <>
{!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings) && (
<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'}`}
@ -147,6 +150,7 @@ export function Navbar() {
<LayoutGrid className="w-4 h-4 inline mr-1.5" /> <LayoutGrid className="w-4 h-4 inline mr-1.5" />
Dashboard Dashboard
</Link> </Link>
)}
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
@ -254,6 +258,7 @@ export function Navbar() {
)} )}
{isAuthenticated && ( {isAuthenticated && (
<> <>
{!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings) && (
<Link <Link
href={isAdmin ? "/admin/dashboard" : "/user/dashboard"} href={isAdmin ? "/admin/dashboard" : "/user/dashboard"}
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
@ -262,6 +267,7 @@ export function Navbar() {
<LayoutGrid className="w-4 h-4" /> <LayoutGrid className="w-4 h-4" />
Dashboard Dashboard
</Link> </Link>
)}
<Button <Button
variant="outline" variant="outline"
className="w-full justify-start text-sm sm:text-base bg-red-600 hover:bg-red-700 text-white border-red-600 hover:border-red-700" className="w-full justify-start text-sm sm:text-base bg-red-600 hover:bg-red-700 text-white border-red-600 hover:border-red-700"