Show Dashboard access in header for all logged-in users and adjust nav to show dashboard even without profile

cgen-51604ca2010544319a70d32a19c8fd1e
This commit is contained in:
Builder.io 2025-09-27 21:02:04 +00:00
parent 385536e3ad
commit a25fca38c7

View file

@ -60,93 +60,96 @@ export default function Layout({ children }: LayoutProps) {
{/* Navigation */} {/* Navigation */}
<nav className="hidden md:flex items-center space-x-8"> <nav className="hidden md:flex items-center space-x-8">
{(user && profile ? userNavigation : navigation).map( {(user ? userNavigation : navigation).map((item, index) => (
(item, index) => ( <Link
<Link key={item.name}
key={item.name} to={item.href}
to={item.href} className={cn(
className={cn( "text-sm font-medium transition-all duration-300 hover:text-aethex-400 hover:scale-105 relative animate-fade-in",
"text-sm font-medium transition-all duration-300 hover:text-aethex-400 hover:scale-105 relative animate-fade-in", location.pathname === item.href
location.pathname === item.href ? "text-aethex-500 animate-pulse-glow"
? "text-aethex-500 animate-pulse-glow" : "text-muted-foreground",
: "text-muted-foreground", )}
)} style={{ animationDelay: `${index * 0.1}s` }}
style={{ animationDelay: `${index * 0.1}s` }} >
> {item.name}
{item.name} {location.pathname === item.href && (
{location.pathname === item.href && ( <div className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-aethex-400 to-neon-blue animate-scale-in" />
<div className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-aethex-400 to-neon-blue animate-scale-in" /> )}
)} </Link>
</Link> ))}
),
)}
</nav> </nav>
{/* Auth Section */} {/* Auth Section */}
<div className="flex items-center space-x-4 animate-slide-left"> <div className="flex items-center space-x-4 animate-slide-left">
{!loading && ( {!loading && (
<> <>
{user && profile ? ( {user ? (
// Logged in user menu // Logged in - always show Dashboard button; show avatar menu if profile exists
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<Button asChild variant="outline" size="sm" className="hover-lift">
<Link to="/dashboard">Dashboard</Link>
</Button>
<Button variant="ghost" size="sm" className="hover-lift"> <Button variant="ghost" size="sm" className="hover-lift">
<Bell className="h-4 w-4" /> <Bell className="h-4 w-4" />
</Button> </Button>
<DropdownMenu> {profile && (
<DropdownMenuTrigger asChild> <DropdownMenu>
<Button <DropdownMenuTrigger asChild>
variant="ghost" <Button
className="relative h-8 w-8 rounded-full hover-lift" variant="ghost"
> className="relative h-8 w-8 rounded-full hover-lift"
<Avatar className="h-8 w-8"> >
<AvatarImage <Avatar className="h-8 w-8">
src={profile.avatar_url || undefined} <AvatarImage
alt={profile.full_name || profile.username} src={profile.avatar_url || undefined}
/> alt={profile.full_name || profile.username}
<AvatarFallback> />
{(profile.full_name || profile.username || "U") <AvatarFallback>
.split(" ") {(profile.full_name || profile.username || "U")
.map((n) => n[0]) .split(" ")
.join("") .map((n) => n[0])
.toUpperCase()} .join("")
</AvatarFallback> .toUpperCase()}
</Avatar> </AvatarFallback>
</Button> </Avatar>
</DropdownMenuTrigger> </Button>
<DropdownMenuContent className="w-56" align="end"> </DropdownMenuTrigger>
<div className="flex items-center justify-start gap-2 p-2"> <DropdownMenuContent className="w-56" align="end">
<div className="flex flex-col space-y-1 leading-none"> <div className="flex items-center justify-start gap-2 p-2">
<p className="font-medium"> <div className="flex flex-col space-y-1 leading-none">
{profile.full_name || profile.username} <p className="font-medium">
</p> {profile.full_name || profile.username}
<p className="w-[200px] truncate text-sm text-muted-foreground"> </p>
{profile.email} <p className="w-[200px] truncate text-sm text-muted-foreground">
</p> {profile.email}
</p>
</div>
</div> </div>
</div> <DropdownMenuSeparator />
<DropdownMenuSeparator /> <DropdownMenuItem asChild>
<DropdownMenuItem asChild> <Link to="/dashboard" className="cursor-pointer">
<Link to="/dashboard" className="cursor-pointer"> <User className="mr-2 h-4 w-4" />
<User className="mr-2 h-4 w-4" /> Dashboard
Dashboard </Link>
</Link> </DropdownMenuItem>
</DropdownMenuItem> <DropdownMenuItem asChild>
<DropdownMenuItem asChild> <Link to="/profile" className="cursor-pointer">
<Link to="/profile" className="cursor-pointer"> <Settings className="mr-2 h-4 w-4" />
<Settings className="mr-2 h-4 w-4" /> Profile Settings
Profile Settings </Link>
</Link> </DropdownMenuItem>
</DropdownMenuItem> <DropdownMenuSeparator />
<DropdownMenuSeparator /> <DropdownMenuItem
<DropdownMenuItem className="cursor-pointer"
className="cursor-pointer" onClick={() => signOut()}
onClick={() => signOut()} >
> <LogOut className="mr-2 h-4 w-4" />
<LogOut className="mr-2 h-4 w-4" /> Sign out
Sign out </DropdownMenuItem>
</DropdownMenuItem> </DropdownMenuContent>
</DropdownMenuContent> </DropdownMenu>
</DropdownMenu> )}
</div> </div>
) : ( ) : (
// Not logged in - show sign in/join buttons // Not logged in - show sign in/join buttons