From 4e0300836e442a37ba8c56f70a611cc4421d692f Mon Sep 17 00:00:00 2001 From: Shanmuga Krishnan S M Date: Fri, 14 Aug 2026 09:49:35 +0530 Subject: [PATCH] fix header alignment and restore navigation dropdown button --- src/components/Header/Header.tsx | 747 ++++++++++++++++--------------- 1 file changed, 394 insertions(+), 353 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 014a48e..ca686b9 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -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(null); const searchRef = useRef(null); + const navRef = useRef(null); const [notifications, setNotifications] = useState([ { @@ -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 ( -
-
- - {/* Left Side: Brand Logo */} - -
+
+
+ + {/* Left Side: Brand Logo & Top Navigation Toggle Button */} +
+ +
RIT Logo
- + RIT Portal - + Freshers Hub
- {/* Center: Desktop Top Navigation Links Strip */} - + {/* Navigation Dropdown Toggle Button */} +
+ +
+
- {/* Right Controls */} -
- - {/* Global Search Input */} -
-
setIsSearchOpen(true)} - className="relative w-full cursor-text" - > - - { - 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' }} - /> - - ⌘K - -
- - {/* Search Live Results Overlay */} - {isSearchOpen && ( -
-
- - {searchQuery.trim() ? 'Search Results' : 'Quick Navigation'} - - -
- -
- {searchResults.length > 0 ? ( - searchResults.map((res, i) => { - const Icon = res.icon; - return ( -
handleSelectResult(res.path)} - className="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-800/80 cursor-pointer transition-colors group" - > -
-
- -
-
- - {res.title} - - {res.desc} -
-
- - {res.category} - -
- ); - }) - ) : ( -
- - {searchQuery.trim() ? `No matches found for "${searchQuery}"` : 'Type to search notes, faculty, routes & clubs'} - -
- - - -
-
- )} -
-
- )} -
- - {/* Date Display Badge */} -
- - {currentDate} -
- - {/* Notifications Dropdown */} -
- - - {/* Notifications Dropdown Panel */} - {isNotifOpen && ( -
-
-
- - Notifications - - {unreadCount > 0 && ( - - {unreadCount} new - - )} -
- -
- {unreadCount > 0 && ( - - )} - {notifications.length > 0 && ( - - )} -
-
- -
- {notifications.length > 0 ? ( - notifications.map((n) => ( -
-
- - {n.title} - - {n.time} -
-

- {n.message} -

-
- )) - ) : ( -
- No new notifications -
- )} -
-
- )} -
- - {/* User Auth Profile / Sign In */} - {isAuthenticated && user ? ( -
- {user.pictureUrl ? ( - {user.name} - ) : ( -
- {user.name.charAt(0)} -
- )} - -
- ) : ( - - )} - -
-
+ + {item.label} + + ); + })} + - {/* ─── SLEEK, MINIMAL & COMPACT TOP DROPDOWN MENU (MOBILE ONLY) ─── */} - - {isMobileMenuOpen && ( - <> - {/* Backdrop */} - 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!) */} - + + {/* Global Search Input */} +
+
setIsSearchOpen(true)} + className="relative w-full cursor-text" > -
- - {/* Header Category Header */} -
- - Quick Navigation Modules + + { + 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' }} + /> + + ⌘K + +
+ + {/* Search Live Results Overlay */} + {isSearchOpen && ( +
+
+ + {searchQuery.trim() ? 'Search Results' : 'Quick Navigation'}
- {/* Compact 2-Column Pill Grid */} -
- {navGroups.flatMap(g => g.items).map((item) => { - const isActive = checkIsActive(item.path); - const Icon = item.icon; - - return ( - 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' }} - > -
- +
+ {searchResults.length > 0 ? ( + searchResults.map((res, i) => { + const Icon = res.icon; + return ( +
handleSelectResult(res.path)} + className="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-800/80 cursor-pointer transition-colors group" + > +
+
+ +
+
+ + {res.title} + + {res.desc} +
+
+ + {res.category} +
- {item.label} - - ); - })} -
- - {/* Compact Footer CTA */} -
- 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" - > - - Dev Collab Hub → - - - {!isAuthenticated && ( - + ); + }) + ) : ( +
+ + {searchQuery.trim() ? `No matches found for "${searchQuery}"` : 'Type to search notes, faculty, routes & clubs'} + +
+ + + +
+
)}
-
- - + )} +
+ + {/* Date Display Badge */} +
+ + {currentDate} +
+ + {/* Notifications Dropdown */} +
+ + + {/* Notifications Dropdown Panel */} + {isNotifOpen && ( +
+
+
+ + Notifications + + {unreadCount > 0 && ( + + {unreadCount} new + + )} +
+ +
+ {unreadCount > 0 && ( + + )} + {notifications.length > 0 && ( + + )} +
+
+ +
+ {notifications.length > 0 ? ( + notifications.map((n) => ( +
+
+ + {n.title} + + {n.time} +
+

+ {n.message} +

+
+ )) + ) : ( +
+ No new notifications +
+ )} +
+
+ )} +
+ + {/* User Auth Profile / Sign In */} + {isAuthenticated && user ? ( +
+ {user.pictureUrl ? ( + {user.name} + ) : ( +
+ {user.name.charAt(0)} +
+ )} + +
+ ) : ( + + )} + +
+
+ + {/* ─── FULL TOP NAVIGATION DROPDOWN DRAWER (DESKTOP & MOBILE) ─── */} + + {isNavOpen && ( + +
+ + {/* Header Bar inside Drawer */} +
+ + All Campus Modules & Services + + +
+ + {/* Navigation Grid (1 Column Mobile, 3 Columns Desktop) */} +
+ {navGroups.map((group) => ( +
+ + {group.title} + + +
+ {group.items.map((item) => { + const isActive = checkIsActive(item.path); + const Icon = item.icon; + + return ( + 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' + }`} + > +
+
+ +
+
+
+ + {item.label} + + {item.highlight && !isActive && ( + + )} +
+ {item.desc && ( + + {item.desc} + + )} +
+
+ + → + + + ); + })} +
+
+ ))} +
+ + {/* Dev Collab Hub CTA Banner */} +
+ 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" + > +
+
+ +
+
+ + Developer Collaboration Hub + + Find co-developers & build open-source projects +
+
+ + Launch Hub → + + +
+ +
+ )}