ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
iamkiddy 2025-12-04 19:44:27 +00:00
parent 460901ab5c
commit c18275bf9b
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/Navbar.tsx
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,13 +142,15 @@ export function Navbar() {
)} )}
{isAuthenticated && ( {isAuthenticated && (
<> <>
<Link {!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings) && (
href={isAdmin ? "/admin/dashboard" : "/user/dashboard"} <Link
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'}`} 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'}`}
<LayoutGrid className="w-4 h-4 inline mr-1.5" /> >
Dashboard <LayoutGrid className="w-4 h-4 inline mr-1.5" />
</Link> Dashboard
</Link>
)}
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
@ -254,14 +258,16 @@ export function Navbar() {
)} )}
{isAuthenticated && ( {isAuthenticated && (
<> <>
<Link {!(isUserDashboard || isAdminDashboard || isUserSettings || isAdminSettings) && (
href={isAdmin ? "/admin/dashboard" : "/user/dashboard"} <Link
onClick={() => setMobileMenuOpen(false)} href={isAdmin ? "/admin/dashboard" : "/user/dashboard"}
className={`text-left text-sm sm:text-base font-medium py-2.5 sm:py-3 px-3 sm:px-4 rounded-lg transition-colors flex items-center gap-2 ${isDark ? 'text-gray-300 hover:bg-gray-800' : 'text-gray-700 hover:bg-gray-100'}`} onClick={() => setMobileMenuOpen(false)}
> className={`text-left text-sm sm:text-base font-medium py-2.5 sm:py-3 px-3 sm:px-4 rounded-lg transition-colors flex items-center gap-2 ${isDark ? 'text-gray-300 hover:bg-gray-800' : 'text-gray-700 hover:bg-gray-100'}`}
<LayoutGrid className="w-4 h-4" /> >
Dashboard <LayoutGrid className="w-4 h-4" />
</Link> Dashboard
</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"