BLUE

Navigation

Breadcrumbs

/ / var / www / gtechmarathon2026.bitkit.dk / httpdocs.backup / client / src / components

Create

Upload

Tip: You can also drag & drop files anywhere on this page to upload.

Edit File Size: 8.11 KB

/var/www/gtechmarathon2026.bitkit.dk/httpdocs.backup/client/src/components/Header.tsx

Text Base64

import { useState } from "react";
import { Link, useLocation } from "wouter";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Menu, ChevronDown, ExternalLink } from "lucide-react";
import { navigationItems } from "@/types/navigation";
import { BRAND_ASSETS } from "@/constants/images";
import { REGISTRATION_URL } from "@/utils/constants";

export default function Header() {
  const [location] = useLocation();
  const [isOpen, setIsOpen] = useState(false);

return (
    <header className="absolute top-0 left-0 right-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-3">
          {/* Logo Section */}
          <div className="flex items-center space-x-3">
            <Link href="/" className="flex items-center">
              <img
                src={BRAND_ASSETS.logo}
                alt="GTECH Marathon Logo"
                className="h-20 w-auto"
              />
            </Link>
            <div className="hidden sm:block h-16 w-px bg-white/30"></div>
            <div className="hidden sm:block text-white">
              <div className="text-base font-bold">15th February 2026</div>
              <div className="text-sm text-blue-100">Kochi</div>
            </div>
          </div>

{/* Desktop Navigation */}
          <nav className="hidden lg:flex space-x-8">
            {navigationItems.map((item) => {
              if (item.subItems) {
                return (
                  <DropdownMenu key={item.name}>
                    <DropdownMenuTrigger className="font-medium transition-colors pb-1 text-white hover:text-gray-200 flex items-center space-x-1 border-none focus:outline-none">
                      <span>{item.name}</span>
                      <ChevronDown className="h-3 w-3" />
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="bg-white border border-gray-200 shadow-lg rounded-none">
                      {item.subItems.map((subItem) => (
                        <DropdownMenuItem key={subItem.name} asChild className="dropdown-menu-item">
                          <a
                            href={subItem.href}
                            target={subItem.external ? "_blank" : "_self"}
                            rel={subItem.external ? "noopener noreferrer" : undefined}
                            className="flex items-center space-x-2 px-4 py-3 text-gray-700 hover:bg-primary hover:text-white cursor-pointer transition-colors outline-none"
                          >
                            <span>{subItem.name}</span>
                            {subItem.external && <ExternalLink className="h-3 w-3" />}
                          </a>
                        </DropdownMenuItem>
                      ))}
                    </DropdownMenuContent>
                  </DropdownMenu>
                );
              }
              return (
                <Link
                  key={item.name}
                  href={item.href!}
                  className={`font-medium transition-colors pb-1 ${
                    location === item.href
                      ? "text-white border-b-2 border-accent"
                      : "text-white hover:text-gray-200"
                  }`}
                >
                  {item.name}
                </Link>
              );
            })}
          </nav>

{/* Register Button and Mobile Menu */}
          <div className="flex items-center space-x-2 sm:space-x-4">
            <a href={REGISTRATION_URL} target="_blank" rel="noopener noreferrer" className="hidden sm:inline-flex">
              <Button className="bg-primary hover:bg-primary/90 text-white text-xs sm:text-sm px-2 sm:px-4 py-2">
                Register Now
              </Button>
            </a>

{/* Mobile Menu */}
            <Sheet open={isOpen} onOpenChange={setIsOpen}>
            <SheetTrigger asChild>
                <div className="lg:hidden text-white hover:text-gray-300 transition-all duration-300 hover:scale-110 p-4 h-16 w-16 flex items-center justify-center cursor-pointer">
                  <Menu
                    className={`h-12 w-12 transition-transform duration-300 ${isOpen ? "rotate-90" : "rotate-0"}`}
                  />
                </div>
              </SheetTrigger>
              <SheetContent
                side="right"
                className="w-80 bg-white/95 backdrop-blur-md border-l border-gray-200"
              >
                <div className="mt-8">
                  <div className="flex flex-col mb-8 pb-4 border-b border-gray-200">
                    <div className="text-primary">
                      <div className="text-sm font-bold">
                        15th February 2026
                      </div>
                      <div className="text-xs text-gray-600">Kochi</div>
                    </div>
                  </div>
                  <nav className="flex flex-col space-y-2">
                    {navigationItems.map((item, index) => {
                      if (item.subItems) {
                        return (
                          <div key={item.name} className="space-y-1">
                            <div className="px-4 py-2 text-sm font-semibold text-gray-900 bg-gray-100 rounded-lg">
                              {item.name}
                            </div>
                            {item.subItems.map((subItem) => (
                              <a
                                key={subItem.name}
                                href={subItem.href}
                                target={subItem.external ? "_blank" : "_self"}
                                rel={subItem.external ? "noopener noreferrer" : undefined}
                                onClick={() => setIsOpen(false)}
                                className="group relative px-6 py-3 font-medium transition-all duration-300 text-gray-700 hover:bg-primary hover:text-white flex items-center space-x-2"
                              >
                                <span>{subItem.name}</span>
                                {subItem.external && <ExternalLink className="h-3 w-3" />}
                              </a>
                            ))}
                          </div>
                        );
                      }
                      return (
                        <Link
                          key={item.name}
                          href={item.href!}
                          className={`group relative px-4 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${
                            location === item.href
                              ? "bg-primary text-white shadow-lg"
                              : "text-gray-700 hover:bg-primary/10 hover:text-primary"
                          }`}
                          style={{
                            animationDelay: `${index * 50}ms`,
                          }}
                          onClick={() => setIsOpen(false)}
                      >
                        <span className="relative z-10">{item.name}</span>
                        {location === item.href && (
                          <div className="absolute inset-0 bg-gradient-to-r from-primary to-primary/80 rounded-lg animate-pulse"></div>
                        )}
                        </Link>
                      );
                    })}
                  </nav>

{/* Mobile Register Button */}
                  <div className="mt-8 pt-6 border-t border-gray-200">
                    <a href={REGISTRATION_URL} target="_blank" rel="noopener noreferrer">
                      <Button className="w-full bg-primary hover:bg-primary/90 text-white transition-all duration-300 hover:scale-105 shadow-lg">
                        Register Now
                      </Button>
                    </a>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  );
}

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Directory Contents

Dirs: 1 × Files: 10

Sort:

Enable drag-to-move

Name	Size	Perms	Modified	Actions
ui DIR	-	drwxr-xr-x	2025-07-09 10:22:45	Edit Download recursive recursive
Footer.tsx	5.05 KB	lrw-r--r--	2025-07-11 11:04:23	Edit Download recursive recursive
Header.tsx	8.11 KB	lrw-r--r--	2025-07-11 11:04:24	Edit Download recursive recursive
HeroSlider.tsx	11.82 KB	lrw-r--r--	2025-07-11 11:04:24	Edit Download recursive recursive
ImageSlider.tsx	8.49 KB	lrw-r--r--	2025-07-11 11:04:25	Edit Download recursive recursive
Layout.tsx	365 B	lrw-r--r--	2025-07-11 11:04:26	Edit Download recursive recursive
Partners.tsx	4.59 KB	lrw-r--r--	2025-07-11 11:04:26	Edit Download recursive recursive
QuickAccess.tsx	2.03 KB	lrw-r--r--	2025-07-11 11:04:24	Edit Download recursive recursive
RaceCategories.tsx	12.64 KB	lrw-r--r--	2025-07-11 11:04:23	Edit Download recursive recursive
RegistrationNotice.tsx	3.81 KB	lrw-r--r--	2025-07-11 11:04:25	Edit Download recursive recursive
YouTubePlayer.tsx	1.38 KB	lrw-r--r--	2025-07-11 11:04:24	Edit Download recursive recursive