All files / src/components/layout/MobileHeader index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

/**
 * MobileHeader Component
 *
 * A compact mobile header with hamburger menu and search button.
 * Features:
 * - Sticky positioning
 * - 44px minimum tap targets
 * - Integrated search and menu overlays
 *
 * @example
 * ```tsx
 * <MobileHeader />
 * ```
 */

import { useState } from 'react';
import Link from 'next/link';
import { useSelector } from 'react-redux';
import { Icon } from '@/components/ui/icons';
import { selectTotalItemCount } from '@/redux/features/cartSlice';
import { useCartModalContext } from '@/contexts';
import { MobileSearch } from './MobileSearch';
import { MobileMenu } from './MobileMenu';
import { cn } from '@/lib/core';

export function MobileHeader() {
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { openCartModal } = useCartModalContext();
  const cartItemCount = useSelector(selectTotalItemCount);

  return (
    <>
      <header
        className={cn(
          'sticky top-0 z-40',
          'bg-white dark:bg-gray-900',
          'border-b border-gray-200 dark:border-gray-800',
          'md:hidden' // Hide on desktop
        )}
      >
        <div className="flex items-center justify-between h-14 px-2">
          {/* Menu button */}
          <button
            onClick={() => setIsMenuOpen(true)}
            className={cn(
              'p-2 min-h-[44px] min-w-[44px]',
              'flex items-center justify-center',
              'rounded-lg',
              'text-gray-700 dark:text-gray-300',
              'hover:bg-gray-100 dark:hover:bg-gray-800',
              'transition-colors'
            )}
            aria-label="Open menu"
          >
            <Icon name="menu" size={24} />
          </button>

          {/* Logo */}
          <Link
            href="/"
            className="flex items-center"
            aria-label="Elite Events - Home"
          >
            <span className="text-lg font-bold text-gray-900 dark:text-white">
              Elite Events
            </span>
          </Link>

          {/* Right actions */}
          <div className="flex items-center">
            {/* Search button */}
            <button
              onClick={() => setIsSearchOpen(true)}
              className={cn(
                'p-2 min-h-[44px] min-w-[44px]',
                'flex items-center justify-center',
                'rounded-lg',
                'text-gray-700 dark:text-gray-300',
                'hover:bg-gray-100 dark:hover:bg-gray-800',
                'transition-colors'
              )}
              aria-label="Search"
            >
              <Icon name="search" size={24} />
            </button>

            {/* Cart button */}
            <button
              onClick={openCartModal}
              className={cn(
                'p-2 min-h-[44px] min-w-[44px]',
                'flex items-center justify-center',
                'rounded-lg',
                'text-gray-700 dark:text-gray-300',
                'hover:bg-gray-100 dark:hover:bg-gray-800',
                'transition-colors',
                'relative'
              )}
              aria-label={`Cart with ${cartItemCount} items`}
            >
              <Icon name="cart" size={24} />
              {cartItemCount > 0 && (
                <span
                  className={cn(
                    'absolute top-1 right-1',
                    'min-w-[18px] h-[18px] px-1',
                    'flex items-center justify-center',
                    'bg-red-500 text-white text-[10px] font-bold rounded-full'
                  )}
                >
                  {cartItemCount > 99 ? '99+' : cartItemCount}
                </span>
              )}
            </button>
          </div>
        </div>
      </header>

      {/* Search overlay */}
      <MobileSearch isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />

      {/* Menu overlay */}
      <MobileMenu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
    </>
  );
}

export default MobileHeader;