| import React from 'react'; |
| import { Bell, Search, Menu, Sun, Moon, User, LogOut } from 'lucide-react'; |
| import { useAuth } from '../hooks/useAuth'; |
|
|
| const Navbar = ({ onSidebarToggle, onThemeToggle, isDarkMode }) => { |
| const { user, logout } = useAuth(); |
|
|
| const handleLogout = () => { |
| logout(); |
| }; |
|
|
| return ( |
| <nav className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-3"> |
| <div className="flex items-center justify-between"> |
| <div className="flex items-center gap-4 flex-1"> |
| <button |
| onClick={onSidebarToggle} |
| className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" |
| > |
| <Menu className="w-5 h-5 text-gray-600 dark:text-gray-400" /> |
| </button> |
| |
| <div className="relative max-w-md flex-1"> |
| <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" /> |
| <input |
| type="text" |
| placeholder="Search tasks, users, documents..." |
| className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" |
| /> |
| </div> |
| </div> |
| |
| <div className="flex items-center gap-4"> |
| <button |
| onClick={onThemeToggle} |
| className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" |
| > |
| {isDarkMode ? ( |
| <Sun className="w-5 h-5 text-gray-600 dark:text-gray-400" /> |
| ) : ( |
| <Moon className="w-5 h-5 text-gray-600 dark:text-gray-400" /> |
| )} |
| </button> |
| |
| <button className="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
| <Bell className="w-5 h-5 text-gray-600 dark:text-gray-400" /> |
| <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span> |
| </button> |
| |
| <div className="flex items-center gap-3 pl-4 border-l border-gray-200 dark:border-gray-700"> |
| <div className="text-right"> |
| <p className="text-sm font-medium text-gray-900 dark:text-gray-100"> |
| {user?.name} |
| </p> |
| <p className="text-xs text-gray-500 dark:text-gray-400 capitalize"> |
| {user?.role} |
| </p> |
| </div> |
| |
| <div className="relative group"> |
| <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-medium"> |
| {user?.name?.charAt(0).toUpperCase()} |
| </div> |
| |
| <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"> |
| <a |
| href="/settings" |
| className="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" |
| > |
| <User className="w-4 h-4" /> |
| <span className="text-sm">Profile</span> |
| </a> |
| <button |
| onClick={handleLogout} |
| className="flex items-center gap-3 w-full px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left" |
| > |
| <LogOut className="w-4 h-4" /> |
| <span className="text-sm">Logout</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
| ); |
| }; |
|
|
| export default Navbar; |
