first commit

frontend/src/components/layout/Header.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { useAuth } from '@/context/AuthContext';
+import LanguageToggle from '@/components/LanguageToggle';
+import Button from '@/components/ui/Button';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function Header() {
+  const { t } = useLanguage();
+  const { user, isAdmin, logout } = useAuth();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const navLinks = [
+    { href: '/', label: t('nav.home') },
+    { href: '/events', label: t('nav.events') },
+    { href: '/community', label: t('nav.community') },
+    { href: '/contact', label: t('nav.contact') },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 bg-white shadow-sm">
+      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2">
+            <span className="text-2xl font-bold font-heading text-primary-dark">
+              Span<span className="text-primary-yellow">glish</span>
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-6">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-gray-700 hover:text-primary-dark font-medium transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* Right side actions */}
+          <div className="hidden md:flex items-center gap-4">
+            <LanguageToggle />
+            
+            {user ? (
+              <div className="flex items-center gap-3">
+                <Link href="/dashboard">
+                  <Button variant="ghost" size="sm">
+                    {t('nav.dashboard')}
+                  </Button>
+                </Link>
+                {isAdmin && (
+                  <Link href="/admin">
+                    <Button variant="ghost" size="sm">
+                      {t('nav.admin')}
+                    </Button>
+                  </Link>
+                )}
+                <span className="text-sm text-gray-600">{user.name}</span>
+                <Button variant="outline" size="sm" onClick={logout}>
+                  {t('nav.logout')}
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <Link href="/login">
+                  <Button variant="ghost" size="sm">
+                    {t('nav.login')}
+                  </Button>
+                </Link>
+                <Link href="/events">
+                  <Button size="sm">
+                    {t('nav.joinEvent')}
+                  </Button>
+                </Link>
+              </div>
+            )}
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            className="md:hidden p-2 rounded-lg hover:bg-gray-100"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? (
+              <XMarkIcon className="w-6 h-6" />
+            ) : (
+              <Bars3Icon className="w-6 h-6" />
+            )}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        <div
+          className={clsx(
+            'md:hidden overflow-hidden transition-all duration-300',
+            {
+              'max-h-0': !mobileMenuOpen,
+              'max-h-96 pb-4': mobileMenuOpen,
+            }
+          )}
+        >
+          <div className="flex flex-col gap-2 pt-4">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg font-medium"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+            
+            <div className="border-t border-gray-100 mt-2 pt-4 px-4">
+              <LanguageToggle variant="buttons" />
+            </div>
+            
+            <div className="px-4 pt-2 flex flex-col gap-2">
+              {user ? (
+                <>
+                  <Link href="/dashboard" onClick={() => setMobileMenuOpen(false)}>
+                    <Button variant="outline" className="w-full">
+                      {t('nav.dashboard')}
+                    </Button>
+                  </Link>
+                  {isAdmin && (
+                    <Link href="/admin" onClick={() => setMobileMenuOpen(false)}>
+                      <Button variant="outline" className="w-full">
+                        {t('nav.admin')}
+                      </Button>
+                    </Link>
+                  )}
+                  <Button variant="secondary" onClick={logout} className="w-full">
+                    {t('nav.logout')}
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
+                    <Button variant="outline" className="w-full">
+                      {t('nav.login')}
+                    </Button>
+                  </Link>
+                  <Link href="/events" onClick={() => setMobileMenuOpen(false)}>
+                    <Button className="w-full">
+                      {t('nav.joinEvent')}
+                    </Button>
+                  </Link>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}