File size: 5,773 Bytes
11f4e50 | 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 101 102 103 104 105 106 107 108 109 | import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { motion, AnimatePresence } from 'framer-motion';
import { RootState, AppDispatch } from '../store';
import { logout } from '../store/authSlice';
export default function Navbar() {
const { user, token } = useSelector((state: RootState) => state.auth);
const dispatch = useDispatch<AppDispatch>();
const navigate = useNavigate();
const [menuOpen, setMenuOpen] = useState(false);
const handleLogout = () => {
dispatch(logout());
navigate('/');
};
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-dark-900/80 backdrop-blur-xl border-b border-dark-400/20">
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
{/* Logo */}
<Link to="/" className="flex items-center gap-2 group">
<div className="w-8 h-8 bg-gold-gradient rounded-lg flex items-center justify-center
group-hover:shadow-gold transition-shadow duration-300">
<span className="text-dark-900 font-display font-bold text-sm">D</span>
</div>
<span className="font-display text-xl font-bold text-light-100">
Director<span className="text-gold-500">.AI</span>
</span>
</Link>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center gap-1">
{token ? (
<>
<Link to="/dashboard" className="btn-ghost text-sm">Dashboard</Link>
<div className="w-px h-6 bg-dark-400/30 mx-2" />
<span className="text-sm text-light-500 mr-3">{user?.email}</span>
<button onClick={handleLogout} className="btn-ghost text-sm text-light-500 hover:text-red-400">
Sign Out
</button>
</>
) : (
<>
<a href="#features" className="btn-ghost text-sm">Features</a>
<a href="#pricing" className="btn-ghost text-sm">Pricing</a>
<a href="#faq" className="btn-ghost text-sm">FAQ</a>
<div className="w-px h-6 bg-dark-400/30 mx-2" />
<Link to="/login" className="btn-ghost text-sm">Sign In</Link>
<Link to="/register" className="btn-primary text-sm ml-2">Get Started</Link>
</>
)}
</div>
{/* Mobile Menu Button */}
<button
onClick={() => setMenuOpen(!menuOpen)}
className="md:hidden flex flex-col gap-1.5 p-2"
aria-label="Toggle Menu"
id="mobile-menu-toggle"
>
<motion.span
animate={menuOpen ? { rotate: 45, y: 6 } : { rotate: 0, y: 0 }}
className="w-5 h-0.5 bg-light-300 block"
/>
<motion.span
animate={menuOpen ? { opacity: 0 } : { opacity: 1 }}
className="w-5 h-0.5 bg-light-300 block"
/>
<motion.span
animate={menuOpen ? { rotate: -45, y: -6 } : { rotate: 0, y: 0 }}
className="w-5 h-0.5 bg-light-300 block"
/>
</button>
</div>
{/* Mobile Menu */}
<AnimatePresence>
{menuOpen && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3 }}
className="md:hidden overflow-hidden bg-dark-800/95 backdrop-blur-xl border-b border-dark-400/20"
>
<div className="px-6 py-4 flex flex-col gap-2">
{token ? (
<>
<Link to="/dashboard" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Dashboard</Link>
<button onClick={() => { handleLogout(); setMenuOpen(false); }} className="btn-ghost text-sm justify-start text-red-400">Sign Out</button>
</>
) : (
<>
<a href="#features" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Features</a>
<a href="#pricing" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Pricing</a>
<Link to="/login" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Sign In</Link>
<Link to="/register" onClick={() => setMenuOpen(false)} className="btn-primary text-sm mt-2">Get Started</Link>
</>
)}
</div>
</motion.div>
)}
</AnimatePresence>
</nav>
);
}
|