fix header alignment and restore navigation dropdown button
Some checks failed
Deploy RIT Freshers Hub to VPS / Deploy to Live VPS (push) Has been cancelled
Some checks failed
Deploy RIT Freshers Hub to VPS / Deploy to Live VPS (push) Has been cancelled
This commit is contained in:
Shanmuga Krishnan S M
@@ -23,6 +23,7 @@ import {
|
||||
LogIn,
|
||||
LogOut,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Grid,
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
@@ -55,7 +56,7 @@ interface NavGroup {
|
||||
}
|
||||
|
||||
export default function Header({}: HeaderProps) {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
||||
const [isNotifOpen, setIsNotifOpen] = useState(false);
|
||||
@@ -67,6 +68,7 @@ export default function Header({}: HeaderProps) {
|
||||
|
||||
const notifRef = useRef<HTMLDivElement>(null);
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
const navRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [notifications, setNotifications] = useState<NotificationItem[]>([
|
||||
{
|
||||
@@ -111,8 +113,8 @@ export default function Header({}: HeaderProps) {
|
||||
items: [
|
||||
{ label: 'Dashboard', path: '/', icon: LayoutDashboard, desc: 'Campus Overview' },
|
||||
{ label: 'Notes & PYQs', path: '/notes', icon: BookOpen, desc: 'Semester Study Materials' },
|
||||
{ label: 'Student Toolkit', path: '/notes?section=toolkit', icon: Wrench, desc: 'Calculators & Tools' },
|
||||
{ label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot, desc: 'AI Campus Assistant' },
|
||||
{ label: 'Student Toolkit', path: '/notes?section=toolkit', icon: Wrench, desc: 'Calculators & Converters' },
|
||||
{ label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot, desc: 'Instant AI Campus Q&A' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -120,17 +122,17 @@ export default function Header({}: HeaderProps) {
|
||||
items: [
|
||||
{ label: 'Bus Tracker', path: '/bus-routes', icon: Bus, desc: 'Routes & Timings' },
|
||||
{ label: 'Campus Map', path: '/campus', icon: MapPin, desc: '3D Campus Map' },
|
||||
{ label: 'Faculty Directory', path: '/faculty', icon: Users, desc: 'Staff Contact Hours' },
|
||||
{ label: 'Student Clubs', path: '/events', icon: ClubIcon, desc: 'Societies & Leads' },
|
||||
{ label: 'Faculty Directory', path: '/faculty', icon: Users, desc: 'Staff Contacts & Hours' },
|
||||
{ label: 'Student Clubs', path: '/events', icon: ClubIcon, desc: 'Official Societies & Leads' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'COMMUNITY & DEV',
|
||||
items: [
|
||||
{ label: 'Freshers Q&A', path: '/community', icon: MessageSquare, desc: 'Peer Advice & Q&A' },
|
||||
{ label: 'Freshers Q&A', path: '/community', icon: MessageSquare, desc: 'Peer Answers & Advice' },
|
||||
{ label: 'Dev Collab Hub', path: '/collab', icon: Code2, desc: 'Find Project Teammates', highlight: true },
|
||||
{ label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Coding Leaderboard' },
|
||||
{ label: 'RAISE Incubator', path: '/raise', icon: Rocket, desc: 'Startup Ventures' },
|
||||
{ label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Campus Coding Arena' },
|
||||
{ label: 'RAISE Incubator', path: '/raise', icon: Rocket, desc: 'Startup Ventures & MVP' },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -159,7 +161,7 @@ export default function Header({}: HeaderProps) {
|
||||
setIsSearchOpen((prev) => !prev);
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setIsMobileMenuOpen(false);
|
||||
setIsNavOpen(false);
|
||||
setIsSearchOpen(false);
|
||||
setIsNotifOpen(false);
|
||||
}
|
||||
@@ -177,14 +179,17 @@ export default function Header({}: HeaderProps) {
|
||||
if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
|
||||
setIsSearchOpen(false);
|
||||
}
|
||||
if (navRef.current && !navRef.current.contains(e.target as Node)) {
|
||||
setIsNavOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Auto close mobile drawer on route change
|
||||
// Auto close nav on location change
|
||||
useEffect(() => {
|
||||
setIsMobileMenuOpen(false);
|
||||
setIsNavOpen(false);
|
||||
}, [location.pathname, location.search]);
|
||||
|
||||
const markAllAsRead = () => {
|
||||
@@ -248,13 +253,23 @@ export default function Header({}: HeaderProps) {
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
// 5 Key Quick Links for PC header center
|
||||
const mainDesktopLinks = [
|
||||
{ label: 'Dashboard', path: '/', icon: LayoutDashboard },
|
||||
{ label: 'Notes & PYQs', path: '/notes', icon: BookOpen },
|
||||
{ label: 'Bus Tracker', path: '/bus-routes', icon: Bus },
|
||||
{ label: 'Dev Collab', path: '/collab', icon: Code2 },
|
||||
{ label: 'LeetCode', path: '/leetcode', icon: Trophy },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 w-full bg-[#0F172A]/95 backdrop-blur-md border-b border-slate-800/80 px-3 sm:px-4 lg:px-8 py-2.5 shadow-md text-white">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between gap-3">
|
||||
|
||||
{/* Left Side: Brand Logo */}
|
||||
<Link to="/" className="flex items-center gap-2.5 group shrink-0">
|
||||
<div className="p-1.5 rounded-xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
|
||||
<header className="sticky top-0 z-40 w-full bg-[#0F172A]/95 backdrop-blur-md border-b border-slate-800/80 px-3 sm:px-4 lg:px-6 py-2 shadow-md text-white">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between gap-2 sm:gap-4">
|
||||
|
||||
{/* Left Side: Brand Logo & Top Navigation Toggle Button */}
|
||||
<div className="flex items-center gap-2 sm:gap-3 shrink-0">
|
||||
<Link to="/" className="flex items-center gap-2 group shrink-0">
|
||||
<div className="p-1 rounded-xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="RIT Logo"
|
||||
@@ -262,364 +277,390 @@ export default function Header({}: HeaderProps) {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="font-bold text-white text-base sm:text-lg tracking-tight truncate leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<span className="font-bold text-white text-base tracking-tight truncate leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
RIT Portal
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[10px] text-orange-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<span className="text-[9px] text-orange-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Freshers Hub
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Center: Desktop Top Navigation Links Strip */}
|
||||
<nav
|
||||
className="hidden lg:flex items-center gap-1 xl:gap-1.5 overflow-x-auto max-w-2xl shrink-0 [&::-webkit-scrollbar]:hidden"
|
||||
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
||||
>
|
||||
{navGroups.flatMap(g => g.items).map((item) => {
|
||||
const isActive = checkIsActive(item.path);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-xs border border-orange-400/40'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60 border border-transparent'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Icon className={`w-3.5 h-3.5 ${isActive ? 'text-white' : 'text-orange-400'}`} />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
{/* Navigation Dropdown Toggle Button */}
|
||||
<div className="relative" ref={navRef}>
|
||||
<button
|
||||
onClick={() => setIsNavOpen((prev) => !prev)}
|
||||
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl border text-xs font-bold transition-all cursor-pointer shadow-sm ${
|
||||
isNavOpen
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white border-orange-400/50'
|
||||
: 'bg-slate-900/90 hover:bg-slate-800 text-slate-200 border-slate-800 hover:border-slate-700'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
title="Toggle Navigation Menu"
|
||||
>
|
||||
<Grid className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span className="hidden xs:inline text-[11.5px]">Navigation</span>
|
||||
<ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${isNavOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Controls */}
|
||||
<div className="flex items-center gap-1.5 sm:gap-2.5 shrink-0">
|
||||
|
||||
{/* Global Search Input */}
|
||||
<div className="relative min-w-0 w-28 xs:w-36 sm:w-44 md:w-52" ref={searchRef}>
|
||||
<div
|
||||
onClick={() => setIsSearchOpen(true)}
|
||||
className="relative w-full cursor-text"
|
||||
>
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setIsSearchOpen(true);
|
||||
}}
|
||||
onFocus={() => setIsSearchOpen(true)}
|
||||
placeholder="Search..."
|
||||
className="w-full pl-8 pr-6 sm:pr-10 py-1.5 text-xs font-medium bg-slate-900/90 hover:bg-slate-900 focus:bg-slate-950 border border-slate-800 focus:border-orange-500/60 rounded-xl text-white placeholder-slate-400 outline-none transition-all shadow-inner truncate"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
/>
|
||||
<span className="hidden sm:inline-flex absolute right-2 top-1/2 -translate-y-1/2 text-[9px] font-semibold text-slate-300 bg-slate-800 border border-slate-700 px-1 py-0.5 rounded shadow-2xs">
|
||||
⌘K
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Search Live Results Overlay */}
|
||||
{isSearchOpen && (
|
||||
<div className="absolute top-full right-0 mt-2 w-72 sm:w-[400px] bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-2 text-left">
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-slate-800">
|
||||
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
{searchQuery.trim() ? 'Search Results' : 'Quick Navigation'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setIsSearchOpen(false)}
|
||||
className="p-1 rounded-md text-slate-400 hover:text-white hover:bg-slate-800"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-72 overflow-y-auto custom-scrollbar p-1 space-y-1">
|
||||
{searchResults.length > 0 ? (
|
||||
searchResults.map((res, i) => {
|
||||
const Icon = res.icon;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => handleSelectResult(res.path)}
|
||||
className="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-800/80 cursor-pointer transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-8 h-8 rounded-lg bg-orange-500/10 text-orange-400 flex items-center justify-center shrink-0 border border-orange-500/30">
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="text-xs font-bold text-white group-hover:text-orange-400 truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{res.title}
|
||||
</span>
|
||||
<span className="text-[11px] text-slate-400 truncate">{res.desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[9px] font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0 border border-slate-700">
|
||||
{res.category}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="p-4 text-center space-y-2">
|
||||
<span className="text-xs text-slate-400 block">
|
||||
{searchQuery.trim() ? `No matches found for "${searchQuery}"` : 'Type to search notes, faculty, routes & clubs'}
|
||||
</span>
|
||||
<div className="flex flex-wrap justify-center gap-1.5 pt-1">
|
||||
<button
|
||||
onClick={() => handleSelectResult('/notes')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Notes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSelectResult('/bus-routes')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Bus Routes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSelectResult('/faculty')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Faculty
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Date Display Badge */}
|
||||
<div className="hidden xl:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800">
|
||||
<Calendar className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span>{currentDate}</span>
|
||||
</div>
|
||||
|
||||
{/* Notifications Dropdown */}
|
||||
<div className="relative" ref={notifRef}>
|
||||
<button
|
||||
onClick={() => setIsNotifOpen((prev) => !prev)}
|
||||
className="relative p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-300 hover:text-white transition-colors cursor-pointer border border-slate-800"
|
||||
title="Notifications"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-orange-500 ring-2 ring-[#0F172A]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Notifications Dropdown Panel */}
|
||||
{isNotifOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-80 sm:w-96 bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-3 text-left">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold text-white" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Notifications
|
||||
</span>
|
||||
{unreadCount > 0 && (
|
||||
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-orange-600 text-white">
|
||||
{unreadCount} new
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={markAllAsRead}
|
||||
className="text-[11px] font-semibold text-orange-400 hover:text-orange-300"
|
||||
>
|
||||
Mark all read
|
||||
</button>
|
||||
)}
|
||||
{notifications.length > 0 && (
|
||||
<button
|
||||
onClick={clearNotifications}
|
||||
className="text-[11px] font-semibold text-slate-400 hover:text-slate-300"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-72 overflow-y-auto custom-scrollbar pt-2 space-y-2">
|
||||
{notifications.length > 0 ? (
|
||||
notifications.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`p-2.5 rounded-xl border transition-colors ${
|
||||
n.read ? 'bg-slate-900/40 border-slate-800' : 'bg-slate-900/90 border-slate-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-bold text-white leading-snug" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{n.title}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 font-medium">{n.time}</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-300 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{n.message}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-6 text-center text-xs text-slate-400">
|
||||
No new notifications
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* User Auth Profile / Sign In */}
|
||||
{isAuthenticated && user ? (
|
||||
<div className="hidden sm:flex items-center gap-1.5 sm:gap-2 pl-1.5 sm:pl-2 border-l border-slate-800">
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 rounded-full border border-slate-700 object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[#C25E17] text-white font-bold text-xs flex items-center justify-center border border-orange-500/40">
|
||||
{user.name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={logout}
|
||||
title="Sign Out"
|
||||
className="p-1 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={loginWithGoogle}
|
||||
className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md shrink-0"
|
||||
{/* Center: Desktop Top Quick Links Strip (Clean 5 Links, No Truncation) */}
|
||||
<nav className="hidden lg:flex items-center gap-1 xl:gap-2 shrink-0">
|
||||
{mainDesktopLinks.map((item) => {
|
||||
const isActive = checkIsActive(item.path);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={`flex items-center gap-1.5 px-2.5 xl:px-3 py-1.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-xs border border-orange-400/40'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60 border border-transparent'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-3.5 h-3.5 shrink-0" />
|
||||
<span>Sign In</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen((prev) => !prev)}
|
||||
className="lg:hidden p-1.5 sm:p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-200 border border-slate-800 flex items-center gap-1.5 transition-colors cursor-pointer"
|
||||
title="Toggle Menu"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-4 h-4 text-orange-400" />
|
||||
) : (
|
||||
<Grid className="w-4 h-4 text-orange-400" />
|
||||
)}
|
||||
<span className="text-xs font-bold text-slate-200">Menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Icon className={`w-3.5 h-3.5 shrink-0 ${isActive ? 'text-white' : 'text-orange-400'}`} />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* ─── SLEEK, MINIMAL & COMPACT TOP DROPDOWN MENU (MOBILE ONLY) ─── */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="fixed inset-0 z-40 bg-black/40 backdrop-blur-xs lg:hidden"
|
||||
/>
|
||||
|
||||
{/* Compact Top Dropdown Panel (Only ~220px High, No Screen Hogging!) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10, scaleY: 0.96 }}
|
||||
animate={{ opacity: 1, y: 0, scaleY: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scaleY: 0.96 }}
|
||||
transition={{ duration: 0.18, ease: 'easeOut' }}
|
||||
className="absolute top-full inset-x-0 z-50 bg-[#0F172A]/98 backdrop-blur-2xl border-b border-slate-800 shadow-2xl p-3 rounded-b-2xl lg:hidden max-h-[65vh] overflow-y-auto custom-scrollbar"
|
||||
{/* Right Controls */}
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 shrink-0">
|
||||
|
||||
{/* Global Search Input */}
|
||||
<div className="relative min-w-0 w-24 xs:w-32 sm:w-40 md:w-48" ref={searchRef}>
|
||||
<div
|
||||
onClick={() => setIsSearchOpen(true)}
|
||||
className="relative w-full cursor-text"
|
||||
>
|
||||
<div className="max-w-4xl mx-auto space-y-2.5">
|
||||
|
||||
{/* Header Category Header */}
|
||||
<div className="flex items-center justify-between px-1 pb-1 border-b border-slate-800/80">
|
||||
<span className="text-[10px] font-extrabold text-orange-400 uppercase tracking-wider">
|
||||
Quick Navigation Modules
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setIsSearchOpen(true);
|
||||
}}
|
||||
onFocus={() => setIsSearchOpen(true)}
|
||||
placeholder="Search..."
|
||||
className="w-full pl-8 pr-6 sm:pr-8 py-1.5 text-xs font-medium bg-slate-900/90 hover:bg-slate-900 focus:bg-slate-950 border border-slate-800 focus:border-orange-500/60 rounded-xl text-white placeholder-slate-400 outline-none transition-all shadow-inner truncate"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
/>
|
||||
<span className="hidden sm:inline-flex absolute right-2 top-1/2 -translate-y-1/2 text-[9px] font-semibold text-slate-300 bg-slate-800 border border-slate-700 px-1 py-0.5 rounded shadow-2xs">
|
||||
⌘K
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Search Live Results Overlay */}
|
||||
{isSearchOpen && (
|
||||
<div className="absolute top-full right-0 mt-2 w-72 sm:w-[380px] bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-2 text-left">
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-slate-800">
|
||||
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
{searchQuery.trim() ? 'Search Results' : 'Quick Navigation'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="text-[10px] font-semibold text-slate-400 hover:text-white"
|
||||
onClick={() => setIsSearchOpen(false)}
|
||||
className="p-1 rounded-md text-slate-400 hover:text-white hover:bg-slate-800"
|
||||
>
|
||||
Close ✕
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Compact 2-Column Pill Grid */}
|
||||
<div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 gap-1.5">
|
||||
{navGroups.flatMap(g => g.items).map((item) => {
|
||||
const isActive = checkIsActive(item.path);
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={`flex items-center gap-2 p-2 rounded-xl text-xs font-medium transition-all ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white font-bold shadow-xs border border-orange-400/40'
|
||||
: 'bg-slate-900/80 hover:bg-slate-800 text-slate-200 border border-slate-800'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<div className={`p-1 rounded-lg shrink-0 ${isActive ? 'bg-white/20 text-white' : 'text-orange-400 bg-slate-800'}`}>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
<div className="max-h-72 overflow-y-auto custom-scrollbar p-1 space-y-1">
|
||||
{searchResults.length > 0 ? (
|
||||
searchResults.map((res, i) => {
|
||||
const Icon = res.icon;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => handleSelectResult(res.path)}
|
||||
className="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-800/80 cursor-pointer transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-8 h-8 rounded-lg bg-orange-500/10 text-orange-400 flex items-center justify-center shrink-0 border border-orange-500/30">
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="text-xs font-bold text-white group-hover:text-orange-400 truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{res.title}
|
||||
</span>
|
||||
<span className="text-[11px] text-slate-400 truncate">{res.desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[9px] font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0 border border-slate-700">
|
||||
{res.category}
|
||||
</span>
|
||||
</div>
|
||||
<span className="truncate">{item.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Compact Footer CTA */}
|
||||
<div className="pt-1.5 flex items-center justify-between gap-2 border-t border-slate-800/80">
|
||||
<Link
|
||||
to="/collab"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] text-white text-[11px] font-bold shadow-sm"
|
||||
>
|
||||
<GitBranch className="w-3.5 h-3.5" />
|
||||
<span>Dev Collab Hub →</span>
|
||||
</Link>
|
||||
|
||||
{!isAuthenticated && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsMobileMenuOpen(false);
|
||||
loginWithGoogle();
|
||||
}}
|
||||
className="py-1.5 px-3 rounded-xl bg-slate-800 text-slate-200 hover:text-white text-[11px] font-bold border border-slate-700"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="p-4 text-center space-y-2">
|
||||
<span className="text-xs text-slate-400 block">
|
||||
{searchQuery.trim() ? `No matches found for "${searchQuery}"` : 'Type to search notes, faculty, routes & clubs'}
|
||||
</span>
|
||||
<div className="flex flex-wrap justify-center gap-1.5 pt-1">
|
||||
<button
|
||||
onClick={() => handleSelectResult('/notes')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Notes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSelectResult('/bus-routes')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Bus Routes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSelectResult('/faculty')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Faculty
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Date Display Badge */}
|
||||
<div className="hidden xl:flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800 whitespace-nowrap">
|
||||
<Calendar className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span>{currentDate}</span>
|
||||
</div>
|
||||
|
||||
{/* Notifications Dropdown */}
|
||||
<div className="relative" ref={notifRef}>
|
||||
<button
|
||||
onClick={() => setIsNotifOpen((prev) => !prev)}
|
||||
className="relative p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-300 hover:text-white transition-colors cursor-pointer border border-slate-800"
|
||||
title="Notifications"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-orange-500 ring-2 ring-[#0F172A]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Notifications Dropdown Panel */}
|
||||
{isNotifOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-80 sm:w-96 bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-3 text-left">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold text-white" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Notifications
|
||||
</span>
|
||||
{unreadCount > 0 && (
|
||||
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-orange-600 text-white">
|
||||
{unreadCount} new
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={markAllAsRead}
|
||||
className="text-[11px] font-semibold text-orange-400 hover:text-orange-300"
|
||||
>
|
||||
Mark all read
|
||||
</button>
|
||||
)}
|
||||
{notifications.length > 0 && (
|
||||
<button
|
||||
onClick={clearNotifications}
|
||||
className="text-[11px] font-semibold text-slate-400 hover:text-slate-300"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-72 overflow-y-auto custom-scrollbar pt-2 space-y-2">
|
||||
{notifications.length > 0 ? (
|
||||
notifications.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`p-2.5 rounded-xl border transition-colors ${
|
||||
n.read ? 'bg-slate-900/40 border-slate-800' : 'bg-slate-900/90 border-slate-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-bold text-white leading-snug" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{n.title}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 font-medium">{n.time}</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-300 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{n.message}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-6 text-center text-xs text-slate-400">
|
||||
No new notifications
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* User Auth Profile / Sign In */}
|
||||
{isAuthenticated && user ? (
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 pl-1.5 sm:pl-2 border-l border-slate-800 shrink-0">
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 rounded-full border border-slate-700 object-cover shrink-0"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[#C25E17] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-orange-500/40">
|
||||
{user.name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={logout}
|
||||
title="Sign Out"
|
||||
className="p-1 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={loginWithGoogle}
|
||||
className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md shrink-0 whitespace-nowrap"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-3.5 h-3.5 shrink-0" />
|
||||
<span>Sign In</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ─── FULL TOP NAVIGATION DROPDOWN DRAWER (DESKTOP & MOBILE) ─── */}
|
||||
<AnimatePresence>
|
||||
{isNavOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10, scaleY: 0.97 }}
|
||||
animate={{ opacity: 1, y: 0, scaleY: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scaleY: 0.97 }}
|
||||
transition={{ duration: 0.18, ease: 'easeOut' }}
|
||||
className="absolute top-full inset-x-0 bg-[#0F172A]/98 backdrop-blur-2xl border-b border-slate-800 shadow-2xl z-50 p-3 sm:p-5 md:p-6 max-h-[80vh] overflow-y-auto custom-scrollbar"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto space-y-4">
|
||||
|
||||
{/* Header Bar inside Drawer */}
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
|
||||
<span className="text-[11px] font-extrabold text-orange-400 uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
All Campus Modules & Services
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setIsNavOpen(false)}
|
||||
className="text-xs font-semibold px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
Close Menu ✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Navigation Grid (1 Column Mobile, 3 Columns Desktop) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-5">
|
||||
{navGroups.map((group) => (
|
||||
<div key={group.title} className="flex flex-col gap-1.5 bg-slate-900/70 p-3 rounded-2xl border border-slate-800/80">
|
||||
<span
|
||||
className="px-2 text-[10px] sm:text-[11px] font-bold text-orange-400 tracking-wider uppercase mb-0.5 flex items-center justify-between"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<span>{group.title}</span>
|
||||
</span>
|
||||
|
||||
<div className="space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isActive = checkIsActive(item.path);
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
onClick={() => setIsNavOpen(false)}
|
||||
className={`flex items-center justify-between p-2.5 rounded-xl transition-all duration-200 group ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-md border border-orange-500/50'
|
||||
: 'hover:bg-slate-800/80 text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className={`p-1.5 rounded-lg shrink-0 ${
|
||||
isActive ? 'bg-white/20 text-white' : 'bg-slate-800 text-orange-400 group-hover:bg-slate-700'
|
||||
}`}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{item.label}
|
||||
</span>
|
||||
{item.highlight && !isActive && (
|
||||
<span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
{item.desc && (
|
||||
<span className={`text-[10px] sm:text-[10.5px] truncate ${isActive ? 'text-orange-100' : 'text-slate-400'}`}>
|
||||
{item.desc}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`text-xs ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`}>
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Dev Collab Hub CTA Banner */}
|
||||
<div className="pt-2 border-t border-slate-800/80">
|
||||
<Link
|
||||
to="/collab"
|
||||
onClick={() => setIsNavOpen(false)}
|
||||
className="w-full flex items-center justify-between p-3 sm:p-3.5 rounded-2xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white group transition-all duration-200 shadow-lg shadow-orange-500/10"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center text-white shrink-0">
|
||||
<GitBranch className="w-4.5 h-4.5" />
|
||||
</div>
|
||||
<div className="flex flex-col text-left min-w-0">
|
||||
<span className="text-xs font-bold leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Developer Collaboration Hub
|
||||
</span>
|
||||
<span className="text-[10.5px] sm:text-[11px] text-orange-100/90 truncate">Find co-developers & build open-source projects</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[11px] sm:text-xs font-bold px-3 py-1 rounded-xl bg-white/20 hover:bg-white/30 transition-colors shrink-0 ml-2">
|
||||
Launch Hub →
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user