WFP logo

"use client"; import { LogOut, Menu, Settings, UserCircle } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; // Example data const languages = ["English", "French", "Arabic"]; // Example data const navigation = { items: [ // Note: the route is just for demonstration of an active item { label: "Home", route: "#" }, { label: "Impact", route: "#" }, { label: "Resources", route: "#", children: [ { label: "Field operations", route: "#" }, { label: "Reports and insights", route: "#" }, { label: "Partners", route: "#" }, ], }, { label: "Contact", route: "#" }, ], user: { initials: "JD", name: "John Doe", email: "john.doe@example.com", }, } as const; function Navigation() { const [activeLanguage, setActiveLanguage] = useState(languages[0]); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); return (

{navigation.items.map((item, index) => "children" in item ? ( {item.label}

{child.label}

) : ( {item.label} ), )}

{navigation.items.map((item, index) => "children" in item ? (

{item.label}

{item.children.map((child) => ( setMobileMenuOpen(false)} > {child.label} ))}

) : ( setMobileMenuOpen(false)} > {item.label} ), )}

{ setActiveLanguage(language); setMobileMenuOpen(false); }} className="w-full justify-between" />

); } // The language picker is implemented in a primitve way to allow furter customization function LanguagePicker({ activeLanguage, onLanguageChange, className, }: { activeLanguage: string; onLanguageChange: (language: string) => void; className?: string; }) { return ( ); } function UserMenu() { return (

{navigation.user.name}

{navigation.user.email}

Profile Settings Log out ); } export { Navigation };

Navigation

Navigation bar (navigation-01)

Page header (navigation-02)