import React, { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { useAuth } from '../context/AuthContext'; import { Button } from './ui/button'; import { ChevronDown, Menu, X } from 'lucide-react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu'; const Navbar = () => { const { user, logout } = useAuth(); const navigate = useNavigate(); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // LOAF logo (local) const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`; const handleLogout = () => { logout(); navigate('/login'); }; return ( <> {/* Top Header - Member Actions (Desktop Only) */}
{user && ( Welcome, {user.first_name} )} {user?.role === 'admin' && ( )}
{/* Main Header - Member Navigation */}
LOAF Logo {/* Desktop Navigation */} {/* Mobile Hamburger Button */}
{/* Mobile Menu Drawer */} {isMobileMenuOpen && (
{/* Backdrop */}
setIsMobileMenuOpen(false)} /> {/* Drawer */}
{/* Header */}
LOAF LOAF
{/* User Info */} {user && (

Welcome,

{user.first_name} {user.last_name}

)} {/* Navigation Links */} {/* Footer Actions */}
{user?.role === 'admin' && ( setIsMobileMenuOpen(false)} > )} setIsMobileMenuOpen(false)} >
)} ); }; export default Navbar;