Member Navbar Responsive update
This commit is contained in:
Koncept Kit
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { Button } from './ui/button';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { ChevronDown, Menu, X } from 'lucide-react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
const Navbar = () => {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
// LOAF logo (local)
|
||||
const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
|
||||
@@ -24,8 +25,8 @@ const Navbar = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Top Header - Member Actions */}
|
||||
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 flex justify-end items-center gap-4 sm:gap-6">
|
||||
{/* Top Header - Member Actions (Desktop Only) */}
|
||||
<header className="hidden lg:flex bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
|
||||
{user && (
|
||||
<span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
Welcome, {user.first_name}
|
||||
@@ -65,7 +66,9 @@ const Navbar = () => {
|
||||
<Link to="/dashboard">
|
||||
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
|
||||
</Link>
|
||||
<nav className="flex gap-6 sm:gap-8 md:gap-10 items-center">
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex gap-6 sm:gap-8 md:gap-10 items-center">
|
||||
<Link
|
||||
to="/"
|
||||
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
|
||||
@@ -154,7 +157,211 @@ const Navbar = () => {
|
||||
Profile
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Hamburger Button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(true)}
|
||||
className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu className="h-6 w-6" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Mobile Menu Drawer */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Drawer */}
|
||||
<div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-[#664fa3] to-[#48286e] shadow-2xl flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-white/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<img src={loafLogo} alt="LOAF" className="h-10 w-10 object-contain" />
|
||||
<span className="text-white font-semibold text-lg" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
LOAF
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
{user && (
|
||||
<div className="px-6 py-4 border-b border-white/20">
|
||||
<p className="text-white text-sm opacity-90" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
Welcome,
|
||||
</p>
|
||||
<p className="text-white font-semibold text-base" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
{user.first_name} {user.last_name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="flex-1 overflow-y-auto py-6 px-4">
|
||||
<div className="space-y-2">
|
||||
<Link
|
||||
to="/"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
|
||||
{/* About Us Section */}
|
||||
<div className="space-y-1">
|
||||
<p className="px-4 py-2 text-white/70 text-sm font-semibold uppercase tracking-wider" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
About Us
|
||||
</p>
|
||||
<Link
|
||||
to="/about/history"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
History
|
||||
</Link>
|
||||
<Link
|
||||
to="/about/mission-values"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Mission and Values
|
||||
</Link>
|
||||
<Link
|
||||
to="/about/board"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Board of Directors
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to="/dashboard"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/events"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
data-testid="mobile-events-nav-button"
|
||||
>
|
||||
Events
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/members/calendar"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Calendar
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/members/directory"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Directory
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/members/gallery"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Gallery
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/members/newsletters"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Documents
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/profile"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
data-testid="mobile-profile-nav-button"
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="p-4 border-t border-white/20 space-y-3">
|
||||
{user?.role === 'admin' && (
|
||||
<Link
|
||||
to="/admin"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<Button
|
||||
className="w-full bg-white/20 hover:bg-white/30 text-white rounded-lg"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
>
|
||||
Admin Panel
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link
|
||||
to="/donate"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<Button
|
||||
className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-lg font-semibold"
|
||||
style={{ fontFamily: "'Montserrat', sans-serif" }}
|
||||
>
|
||||
Donate
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
setIsMobileMenuOpen(false);
|
||||
handleLogout();
|
||||
}}
|
||||
variant="outline"
|
||||
className="w-full border-2 border-white/30 text-white hover:bg-white/10 rounded-lg"
|
||||
style={{ fontFamily: "'Poppins', sans-serif" }}
|
||||
data-testid="mobile-logout-button"
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user