93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import { DashboardView } from '../types';
|
|
|
|
interface NavbarProps {
|
|
activeView: DashboardView;
|
|
onViewChange: (view: DashboardView) => void;
|
|
onLogout: () => void;
|
|
onBackToCoordinatorHub?: () => void;
|
|
}
|
|
|
|
const Navbar: React.FC<NavbarProps> = ({ activeView, onViewChange, onLogout, onBackToCoordinatorHub }) => {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 10);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const menuItems: { id: DashboardView; label: string }[] = [
|
|
{ id: 'HOME', label: 'HOME' },
|
|
{ id: 'EVENTS', label: 'EVENTS' },
|
|
{ id: 'REGISTRATIONS', label: 'REGISTRATIONS' },
|
|
{ id: 'PROFILE', label: 'PROFILE' },
|
|
{ id: 'ABOUT', label: 'ABOUT' },
|
|
{ id: 'CONTACT', label: 'CONTACT' },
|
|
];
|
|
|
|
return (
|
|
<nav className={`fixed top-0 left-0 w-full z-[100] transition-all duration-500 px-8 py-5 flex items-center justify-between ${
|
|
isScrolled
|
|
? 'bg-white/90 backdrop-blur-2xl py-4 shadow-sm'
|
|
: 'bg-transparent py-6'
|
|
}`}>
|
|
{/* Brand Logo (Top Left) */}
|
|
<div
|
|
className="flex items-center cursor-pointer group transition-transform hover:scale-105"
|
|
onClick={() => onViewChange('HOME')}
|
|
>
|
|
<div className="transition-all duration-300">
|
|
<img
|
|
src="https://www.facultyplus.com/wp-content/uploads/2020/11/Rit-logo.png"
|
|
alt="RIT Logo"
|
|
className={`h-12 w-auto object-contain transition-all duration-300`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nav Links & Logout (Right Side) */}
|
|
<div className="flex items-center gap-8 md:gap-12">
|
|
<div className="hidden md:flex items-center gap-8">
|
|
{onBackToCoordinatorHub && (
|
|
<button
|
|
onClick={onBackToCoordinatorHub}
|
|
className={`text-[10px] font-black tracking-[0.2em] px-4 py-1.5 rounded-lg transition-all border border-[#f97316] text-[#f97316] hover:bg-[#f97316] hover:text-white`}
|
|
>
|
|
COORDINATOR HUB
|
|
</button>
|
|
)}
|
|
{menuItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onViewChange(item.id)}
|
|
className={`text-xs font-serif tracking-[0.2em] transition-all relative py-1 ${
|
|
activeView === item.id
|
|
? 'text-[#f97316]'
|
|
: isScrolled ? 'text-black hover:text-[#f97316]' : 'text-black hover:text-[#f97316]'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
{activeView === item.id && (
|
|
<span className="absolute -bottom-1 left-0 w-full h-[1px] bg-[#f97316]"></span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={onLogout}
|
|
className={`text-[10px] font-black tracking-[0.2em] px-6 py-2 rounded-full transition-all border bg-[#f97316] text-white border-[#f97316] hover:bg-[#ea580c] hover:border-[#ea580c]`}
|
|
>
|
|
LOG OUT
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|