Skip to content

Commit 2e695a7

Browse files
TacticalReaderTacticalReader
authored
Update Navbar.jsx
1 parent 5ebe992 commit 2e695a7

1 file changed

Lines changed: 48 additions & 67 deletions

File tree

‎src/components/layout/Navbar.jsx‎

Lines changed: 48 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
HiX,
1313
HiOutlineLogout,
1414
HiChevronDown,
15+
HiOutlineHome, // ← NEW
16+
HiOutlineTruck, // ← NEW
1517
} from 'react-icons/hi';
1618

1719
import { useAuth } from '../../hooks/useAuth';
@@ -78,21 +80,21 @@ const NAV_LINKS = [
7880

7981
// ─── Animation Variants ───────────────────────────────────────────────────────
8082
const dropdownVariants = {
81-
hidden: { opacity: 0, y: -8, scale: 0.97 },
82-
visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.18, ease: 'easeOut' } },
83-
exit: { opacity: 0, y: -6, scale: 0.97, transition: { duration: 0.12 } },
83+
hidden: { opacity: 0, y: -8, scale: 0.97 },
84+
visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.18, ease: 'easeOut' } },
85+
exit: { opacity: 0, y: -6, scale: 0.97, transition: { duration: 0.12 } },
8486
};
8587

8688
const mobileMenuVariants = {
87-
hidden: { opacity: 0, x: '100%' },
88-
visible: { opacity: 1, x: '0%', transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] } },
89-
exit: { opacity: 0, x: '100%', transition: { duration: 0.22 } },
89+
hidden: { opacity: 0, x: '100%' },
90+
visible: { opacity: 1, x: '0%', transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] } },
91+
exit: { opacity: 0, x: '100%', transition: { duration: 0.22 } },
9092
};
9193

9294
const searchVariants = {
93-
hidden: { opacity: 0, y: -16, scaleY: 0.92 },
94-
visible: { opacity: 1, y: 0, scaleY: 1, transition: { duration: 0.22 } },
95-
exit: { opacity: 0, y: -10, scaleY: 0.95, transition: { duration: 0.15 } },
95+
hidden: { opacity: 0, y: -16, scaleY: 0.92 },
96+
visible: { opacity: 1, y: 0, scaleY: 1, transition: { duration: 0.22 } },
97+
exit: { opacity: 0, y: -10, scaleY: 0.95, transition: { duration: 0.15 } },
9698
};
9799

98100
// ─── Icon Badge ───────────────────────────────────────────────────────────────
@@ -114,7 +116,6 @@ function SearchOverlay({ onClose }) {
114116
const { closeSearch } = useSearchContext();
115117
const ref = useRef(null);
116118

117-
// Close on Escape
118119
useEffect(() => {
119120
const handler = (e) => {
120121
if (e.key === 'Escape') {
@@ -126,15 +127,10 @@ function SearchOverlay({ onClose }) {
126127
return () => window.removeEventListener('keydown', handler);
127128
}, [closeSearch, onClose]);
128129

129-
// Close when clicking outside
130130
useEffect(() => {
131131
const handler = (e) => {
132-
// If the click is outside the search bar area
133132
if (ref.current && !ref.current.contains(e.target)) {
134-
// Also ensure we're not clicking the search toggle button itself,
135-
// otherwise it would close and then likely re-open immediately
136133
if (e.target.closest('#nav-search-btn')) return;
137-
138134
closeSearch();
139135
onClose?.();
140136
}
@@ -172,7 +168,7 @@ function DesktopNavItem({ link }) {
172168
const timerRef = useRef(null);
173169
const navigate = useNavigate();
174170

175-
const openMenu = () => { clearTimeout(timerRef.current); setOpen(true); };
171+
const openMenu = () => { clearTimeout(timerRef.current); setOpen(true); };
176172
const closeMenu = () => { timerRef.current = setTimeout(() => setOpen(false), 120); };
177173

178174
if (!link.children) {
@@ -257,7 +253,6 @@ function DesktopNavItem({ link }) {
257253
))}
258254
</div>
259255

260-
{/* Shop all link at bottom */}
261256
<div
262257
className="mt-4 border-t pt-3"
263258
style={{ borderColor: 'var(--color-border-light)' }}
@@ -284,7 +279,6 @@ function UserDropdown({ user, isLoggedIn, logout, onOpenLogin, onOpenSignup }) {
284279
const ref = useRef(null);
285280
const navigate = useNavigate();
286281

287-
// Close when clicking outside
288282
useEffect(() => {
289283
const handler = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
290284
document.addEventListener('mousedown', handler);
@@ -408,7 +402,6 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
408402

409403
return (
410404
<>
411-
{/* Backdrop */}
412405
<motion.div
413406
key="backdrop"
414407
initial={{ opacity: 0 }}
@@ -418,7 +411,6 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
418411
className="fixed inset-0 z-[var(--z-navbar)] bg-black/50 backdrop-blur-sm"
419412
/>
420413

421-
{/* Drawer */}
422414
<motion.div
423415
key="drawer"
424416
variants={mobileMenuVariants}
@@ -432,7 +424,6 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
432424
boxShadow: 'var(--shadow-lg)',
433425
}}
434426
>
435-
{/* Header */}
436427
<div
437428
className="flex items-center justify-between px-5 py-4 border-b shrink-0"
438429
style={{ borderColor: 'var(--color-border)' }}
@@ -455,7 +446,6 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
455446
</button>
456447
</div>
457448

458-
{/* Navigation */}
459449
<nav className="flex-1 px-4 py-4 space-y-1">
460450
{NAV_LINKS.map((link) => {
461451
if (!link.children) {
@@ -465,13 +455,15 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
465455
to={link.to}
466456
onClick={onClose}
467457
className={({ isActive }) =>
468-
`flex items-center px-3 py-3 rounded-lg text-sm font-medium transition-colors ${
469-
isActive
470-
? 'text-[color:var(--color-primary)] bg-[color:var(--color-primary-light)]'
471-
: 'text-[color:var(--color-text)] hover:bg-[color:var(--color-bg-secondary)]'
458+
`flex items-center px-3 py-3 rounded-lg text-sm font-medium transition-colors ${isActive
459+
? 'text-[color:var(--color-primary)] bg-[color:var(--color-primary-light)]'
460+
: 'text-[color:var(--color-text)] hover:bg-[color:var(--color-bg-secondary)]'
472461
}`
473462
}
474463
>
464+
{/* NEW: Icons for flat mobile menu items */}
465+
{link.label === 'Home' && <HiOutlineHome size={18} className="mr-3" />}
466+
{link.label === 'Shop All' && <HiOutlineShoppingBag size={18} className="mr-3" />}
475467
{link.label}
476468
</NavLink>
477469
);
@@ -514,10 +506,9 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
514506
to={item.to}
515507
onClick={onClose}
516508
className={({ isActive }) =>
517-
`block px-3 py-2.5 rounded-lg text-sm transition-all duration-200 ${
518-
isActive
519-
? 'text-[color:var(--color-primary)] font-medium bg-[color:var(--color-primary-light)]'
520-
: 'text-[color:var(--color-text-secondary)] hover:bg-[color:var(--color-bg-secondary)] hover:translate-x-1 hover:text-[color:var(--color-primary)]'
509+
`block px-3 py-2.5 rounded-lg text-sm transition-all duration-200 ${isActive
510+
? 'text-[color:var(--color-primary)] font-medium bg-[color:var(--color-primary-light)]'
511+
: 'text-[color:var(--color-text-secondary)] hover:bg-[color:var(--color-bg-secondary)] hover:translate-x-1 hover:text-[color:var(--color-primary)]'
521512
}`
522513
}
523514
>
@@ -534,7 +525,6 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
534525
})}
535526
</nav>
536527

537-
{/* Bottom Auth section */}
538528
<div
539529
className="mt-auto px-4 py-4 border-t shrink-0"
540530
style={{ borderColor: 'var(--color-border)' }}
@@ -592,26 +582,24 @@ function MobileMenu({ onClose, onOpenLogin, onOpenSignup }) {
592582
// ─── Main Navbar ──────────────────────────────────────────────────────────────
593583
export default function Navbar() {
594584
const { user, isLoggedIn, logout } = useAuth();
595-
const { totalItems: cartCount } = useCart();
585+
const { totalItems: cartCount } = useCart();
596586
const { totalItems: wishlistCount } = useWishlist();
597-
const { isDark, toggleTheme } = useThemeContext();
587+
const { isDark, toggleTheme } = useThemeContext();
598588
const { isOpen: isSearchOpen, openSearch } = useSearchContext();
599-
const scrollY = useScrollPosition();
600-
const isMobile = useMediaQuery('(max-width: 768px)');
589+
const scrollY = useScrollPosition();
590+
const isMobile = useMediaQuery('(max-width: 768px)');
601591
const [mobileOpen, setMobileOpen] = useState(false);
602592
const [cartOpen, setCartOpen] = useState(false);
603593
const [loginOpen, setLoginOpen] = useState(false);
604594
const [signupOpen, setSignupOpen] = useState(false);
605595

606596
const isScrolled = scrollY > 12;
607597

608-
// Prevent body scroll when mobile menu is open
609598
useEffect(() => {
610599
document.body.style.overflow = mobileOpen || cartOpen ? 'hidden' : '';
611600
return () => { document.body.style.overflow = ''; };
612601
}, [mobileOpen, cartOpen]);
613602

614-
// Close mobile menu on window resize to desktop
615603
useEffect(() => {
616604
if (!isMobile && mobileOpen) setMobileOpen(false);
617605
}, [isMobile]);
@@ -635,18 +623,19 @@ export default function Navbar() {
635623
WebkitBackdropFilter: 'blur(12px)',
636624
}}
637625
>
638-
{/* Top strip — optional promo bar */}
626+
{/* Top strip — promo bar with NEW truck icon */}
639627
<div
640628
className="hidden md:flex items-center justify-center py-1.5 text-xs font-medium tracking-wide gap-2"
641629
style={{ background: 'var(--color-primary)', color: '#fff' }}
642630
>
643631
<img src="https://flagcdn.com/w20/in.png" srcSet="https://flagcdn.com/w40/in.png 2x" width="20" alt="India flag" className="inline-block rounded-sm shadow-sm" />
632+
<HiOutlineTruck size={14} className="inline" /> {/* ← NEW icon */}
644633
Free shipping on orders above ₹999 &nbsp;·&nbsp; Use code{' '}
645634
<strong className="ml-1">VASTRA10</strong>&nbsp;for 10% off
646635
</div>
647636

648637
<div className="container relative flex h-16 items-center gap-4">
649-
{/* ── Logo ── */}
638+
{/* Logo */}
650639
<Link
651640
to={ROUTES.HOME}
652641
id="nav-logo"
@@ -658,7 +647,6 @@ export default function Navbar() {
658647
<span style={{ color: 'var(--color-text)', fontFamily: 'var(--font-syne)', fontWeight: '800', letterSpacing: '-0.03em', marginLeft: '1px' }}>Hub</span>
659648
</Link>
660649

661-
{/* ── Desktop Nav Links ── */}
662650
{!isMobile && (
663651
<nav aria-label="Main navigation" className="flex items-center gap-7">
664652
{NAV_LINKS.map((link) => (
@@ -667,10 +655,9 @@ export default function Navbar() {
667655
</nav>
668656
)}
669657

670-
{/* ── Spacer ── */}
671658
<div className="flex-1" />
672659

673-
{/* ── Right Action Icons ── */}
660+
{/* Right Action Icons – added Wishlist on mobile + truck in promo */}
674661
<div className="flex items-center gap-1.5">
675662
{/* Search */}
676663
<button
@@ -695,8 +682,8 @@ export default function Navbar() {
695682
<motion.span
696683
key={isDark ? 'sun' : 'moon'}
697684
initial={{ rotate: -30, opacity: 0 }}
698-
animate={{ rotate: 0, opacity: 1 }}
699-
exit={{ rotate: 30, opacity: 0 }}
685+
animate={{ rotate: 0, opacity: 1 }}
686+
exit={{ rotate: 30, opacity: 0 }}
700687
transition={{ duration: 0.2 }}
701688
className="flex"
702689
>
@@ -705,19 +692,17 @@ export default function Navbar() {
705692
</AnimatePresence>
706693
</button>
707694

708-
{/* Wishlist */}
709-
{!isMobile && (
710-
<Link
711-
id="nav-wishlist-btn"
712-
to={ROUTES.WISHLIST}
713-
aria-label={`Wishlist (${wishlistCount} items)`}
714-
className="relative flex h-9 w-9 items-center justify-center rounded-full transition-colors hover:bg-[color:var(--color-bg-secondary)]"
715-
style={{ color: 'var(--color-text)' }}
716-
>
717-
<HiOutlineHeart size={21} />
718-
<IconBadge count={wishlistCount} />
719-
</Link>
720-
)}
695+
{/* Wishlist – NOW visible on mobile too */}
696+
<Link
697+
id="nav-wishlist-btn"
698+
to={ROUTES.WISHLIST}
699+
aria-label={`Wishlist (${wishlistCount} items)`}
700+
className="relative flex h-9 w-9 items-center justify-center rounded-full transition-colors hover:bg-[color:var(--color-bg-secondary)]"
701+
style={{ color: 'var(--color-text)' }}
702+
>
703+
<HiOutlineHeart size={21} />
704+
<IconBadge count={wishlistCount} />
705+
</Link>
721706

722707
{/* Cart */}
723708
<button
@@ -733,10 +718,12 @@ export default function Navbar() {
733718

734719
{/* User (desktop only) */}
735720
{!isMobile && (
736-
<UserDropdown
737-
user={user} isLoggedIn={isLoggedIn} logout={logout}
738-
onOpenLogin={() => setLoginOpen(true)}
739-
onOpenSignup={() => setSignupOpen(true)}
721+
<UserDropdown
722+
user={user}
723+
isLoggedIn={isLoggedIn}
724+
logout={logout}
725+
onOpenLogin={() => setLoginOpen(true)}
726+
onOpenSignup={() => setSignupOpen(true)}
740727
/>
741728
)}
742729

@@ -755,27 +742,21 @@ export default function Navbar() {
755742
)}
756743
</div>
757744

758-
{/* ── Search Overlay (attached to nav bottom) ── */}
759745
<AnimatePresence>
760746
{isSearchOpen && <SearchOverlay />}
761747
</AnimatePresence>
762748
</div>
763749
</header>
764750

765-
{/* ── Mobile Menu Drawer ── */}
766751
<AnimatePresence>
767752
{mobileOpen && <MobileMenu onClose={() => setMobileOpen(false)} onOpenLogin={() => setLoginOpen(true)} onOpenSignup={() => setSignupOpen(true)} />}
768753
</AnimatePresence>
769754

770-
{/* ── Auth Modals ── */}
771755
<LoginModal isOpen={loginOpen} onClose={() => setLoginOpen(false)} onSwitchToSignup={() => { setLoginOpen(false); setSignupOpen(true); }} />
772756
<SignupModal isOpen={signupOpen} onClose={() => setSignupOpen(false)} onSwitchToLogin={() => { setSignupOpen(false); setLoginOpen(true); }} />
773757

774-
{/* ── Slide-in Cart Drawer ── */}
775758
<CartDrawer isOpen={cartOpen} onClose={() => setCartOpen(false)} />
776759

777-
{/* ── Spacer to push page content below fixed navbar ── */}
778-
{/* spacer height: 64px (mobile) or 96px (desktop with promo strip) */}
779760
<div className="h-16 md:h-24" aria-hidden="true" />
780761
</>
781762
);

0 commit comments

Comments
 (0)