203 lines
8.1 KiB
TypeScript
203 lines
8.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Bell, Settings, LogOut, User, Menu, X, Shield } from "lucide-react";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
|
|
export function Header() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
|
const pathname = usePathname();
|
|
const { user, logout, isAdmin } = useAuth();
|
|
|
|
// Handle logout with loading state
|
|
const handleLogout = async () => {
|
|
try {
|
|
setIsLoggingOut(true);
|
|
await logout();
|
|
} catch (error) {
|
|
console.error('Logout failed:', error);
|
|
setIsLoggingOut(false);
|
|
}
|
|
};
|
|
|
|
// Define routes where the header should not be shown
|
|
const noHeaderRoutes = ["/signin", "/signup"];
|
|
if (noHeaderRoutes.includes(pathname)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<header className="bg-black/80 text-white border-b border-white/10 backdrop-blur">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex h-16 justify-between items-center">
|
|
{/* Logo */}
|
|
<div className="flex items-center">
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
|
|
<span className="text-black font-bold text-sm">C</span>
|
|
</div>
|
|
<span className="text-xl font-bold">Codenuk</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex space-x-2">
|
|
{/* Hide Project Builder and other user nav when admin is logged in */}
|
|
{!isAdmin && (
|
|
<Link
|
|
key="project-builder"
|
|
href="/project-builder"
|
|
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
|
pathname === "/project-builder"
|
|
? "bg-orange-500 text-black"
|
|
: "text-white/70 hover:text-white hover:bg-white/5"
|
|
}`}
|
|
>
|
|
Project Builder
|
|
</Link>
|
|
)}
|
|
{/* Admin Navigation */}
|
|
{isAdmin && (
|
|
<Link
|
|
href="/admin"
|
|
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center space-x-1 ${
|
|
pathname === "/admin"
|
|
? "bg-orange-500 text-black"
|
|
: "text-white/70 hover:text-white hover:bg-white/5"
|
|
}`}
|
|
>
|
|
<Shield className="h-4 w-4" />
|
|
<span>Admin</span>
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
|
|
{/* Right side */}
|
|
<div className="flex items-center space-x-4 cursor-pointer">
|
|
{/* While loading, don't show sign-in or user menu to avoid flicker */}
|
|
{!user ? (
|
|
<Link href="/signin">
|
|
<Button size="sm" className="cursor-pointer">Sign In</Button>
|
|
</Link>
|
|
) : (
|
|
<>
|
|
{/* Notifications */}
|
|
<Button variant="ghost" size="sm" className="relative text-white/80 hover:text-white hover:bg-white/5">
|
|
<Bell className="h-5 w-5" />
|
|
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs bg-orange-500 text-black">
|
|
3
|
|
</Badge>
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{/* User Menu - Only show when user is authenticated */}
|
|
{user && user.email && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full cursor-pointer hover:bg-white/5">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src="/avatars/01.png" alt={user.username || user.email || "User"} />
|
|
<AvatarFallback>
|
|
{(user.username && user.username.charAt(0)) || (user.email && user.email.charAt(0)) || "U"}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 bg-black text-white border-white/10" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{user.username || user.email || "User"}</p>
|
|
<p className="text-xs leading-none text-white/60">{user.email || "No email"}</p>
|
|
{isAdmin && (
|
|
<Badge className="w-fit bg-orange-500 text-black text-xs">
|
|
<Shield className="h-3 w-3 mr-1" />
|
|
Admin
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
|
|
<User className="mr-2 h-4 w-4" />
|
|
<span>Profile</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
<span>Settings</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout} className="hover:bg-white/5 cursor-pointer" disabled={isLoggingOut}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>{isLoggingOut ? "Logging out..." : "Log out"}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
|
|
{/* Mobile menu button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="md:hidden"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden py-4 border-t border-white/10">
|
|
<nav className="flex flex-col space-y-2">
|
|
{!isAdmin && (
|
|
<Link
|
|
key="project-builder-mobile"
|
|
href="/project-builder"
|
|
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
|
pathname === "/project-builder"
|
|
? "bg-orange-500 text-black"
|
|
: "text-white/70 hover:text-white hover:bg-white/5"
|
|
}`}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Project Builder
|
|
</Link>
|
|
)}
|
|
{/* Admin Navigation for mobile */}
|
|
{isAdmin && (
|
|
<Link
|
|
href="/admin"
|
|
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center space-x-1 ${
|
|
pathname === "/admin"
|
|
? "bg-orange-500 text-black"
|
|
: "text-white/70 hover:text-white hover:bg-white/5"
|
|
}`}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
<Shield className="h-4 w-4" />
|
|
<span>Admin</span>
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
} |