File size: 4,056 Bytes
25732fb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | import React from 'react'
import { motion } from 'framer-motion'
import { useAuth } from '../../hooks/useAuth'
import { Menu, LogOut, User, Bell } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
const Navbar = ({ onMenuClick }) => {
const { user, logout } = useAuth()
const navigate = useNavigate()
const handleLogout = async () => {
await logout()
navigate('/login')
}
return (
<motion.nav
initial={{ y: -100 }}
animate={{ y: 0 }}
className="glass-effect sticky top-0 z-40 border-b border-white/20"
>
<div className="px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Left section */}
<div className="flex items-center gap-4">
<button
onClick={onMenuClick}
className="p-2 rounded-xl hover:bg-primary-50 transition-colors lg:hidden"
>
<Menu className="w-6 h-6 text-slate-700" />
</button>
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center shadow-lg">
<span className="text-white font-bold text-lg">AL</span>
</div>
<div className="hidden sm:block">
<h1 className="text-lg font-bold gradient-text">
Adaptive Learning
</h1>
<p className="text-xs text-slate-500">AI-Powered Education</p>
</div>
</div>
</div>
{/* Right section */}
<div className="flex items-center gap-3">
{/* Notifications */}
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="relative p-2 rounded-xl hover:bg-primary-50 transition-colors"
>
<Bell className="w-5 h-5 text-slate-600" />
<span className="absolute top-1 right-1 w-2 h-2 bg-accent-500 rounded-full"></span>
</motion.button>
{/* User menu */}
<div className="flex items-center gap-3 pl-3 border-l border-slate-200">
<div className="hidden sm:block text-right">
<p className="text-sm font-semibold text-slate-700">
{user?.username}
</p>
<p className="text-xs text-slate-500">Student</p>
</div>
<div className="relative group">
<motion.button
whileHover={{ scale: 1.05 }}
className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-100 to-accent-100 flex items-center justify-center font-semibold text-primary-700"
>
{user?.username?.charAt(0).toUpperCase()}
</motion.button>
{/* Dropdown */}
<div className="absolute right-0 mt-2 w-48 glass-effect rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
<div className="p-2">
<button className="w-full flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-primary-50 transition-colors text-left">
<User className="w-4 h-4" />
<span className="text-sm">Profile</span>
</button>
<button
onClick={handleLogout}
className="w-full flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-red-50 text-red-600 transition-colors text-left"
>
<LogOut className="w-4 h-4" />
<span className="text-sm">Logout</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</motion.nav>
)
}
export default Navbar |