From 860d1c1dd0c177cfaee331241ed17ea8cae1396f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 20 Sep 2025 12:26:10 +0000
Subject: [PATCH] Organize navigation links

---
 src/components/layout/Header.tsx | 69 +++++++++++++++++++++++++-------
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 893e0ef5..cc947a37 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { Search, Menu, Zap, MapPin, Star } from 'lucide-react';
+import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { Badge } from '@/components/ui/badge';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Link, useNavigate } from 'react-router-dom';
 import { SearchDropdown } from '@/components/search/SearchDropdown';
 import { AuthButtons } from '@/components/auth/AuthButtons';
@@ -29,20 +30,43 @@ export function Header() {
           
           {/* Desktop Navigation */}
           <nav className="hidden md:flex items-center gap-6 ml-8">
-            <Button variant="ghost" className="text-sm font-medium hover:text-primary" onClick={() => navigate('/parks')}>
-              <MapPin className="w-4 h-4 mr-2" />
-              Parks
-            </Button>
-            <Button variant="ghost" className="text-sm font-medium hover:text-primary" onClick={() => navigate('/rides')}>
-              🎢 Rides
-            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+                  <Search className="w-4 h-4 mr-2" />
+                  Explore
+                  <ChevronDown className="w-4 h-4 ml-1" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-48 bg-background border border-border shadow-lg">
+                <DropdownMenuItem onClick={() => navigate('/parks')}>
+                  <MapPin className="w-4 h-4 mr-2" />
+                  Parks
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => navigate('/rides')}>
+                  🎢 <span className="ml-2">Rides</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => navigate('/manufacturers')}>
+                  🏭 <span className="ml-2">Manufacturers</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => navigate('/operators')}>
+                  <Building className="w-4 h-4 mr-2" />
+                  Operators
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => navigate('/owners')}>
+                  <Crown className="w-4 h-4 mr-2" />
+                  Owners
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => navigate('/designers')}>
+                  <Palette className="w-4 h-4 mr-2" />
+                  Designers
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
             <Button variant="ghost" className="text-sm font-medium hover:text-primary">
               <Star className="w-4 h-4 mr-2" />
               Reviews
             </Button>
-            <Button variant="ghost" className="text-sm font-medium hover:text-primary" onClick={() => navigate('/manufacturers')}>
-              🏭 Manufacturers
-            </Button>
           </nav>
         </div>
 
@@ -65,6 +89,7 @@ export function Header() {
             </SheetTrigger>
             <SheetContent side="right" className="w-[300px] sm:w-[400px]">
               <div className="flex flex-col gap-4 mt-8">
+                <div className="text-sm font-semibold text-muted-foreground mb-2">Explore</div>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/parks')}>
                   <MapPin className="w-4 h-4 mr-2" />
                   Parks
@@ -72,13 +97,27 @@ export function Header() {
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}>
                   🎢 Rides
                 </Button>
-                <Button variant="ghost" className="justify-start">
-                  <Star className="w-4 h-4 mr-2" />
-                  Reviews
-                </Button>
                 <Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
                   🏭 Manufacturers
                 </Button>
+                <Button variant="ghost" className="justify-start" onClick={() => navigate('/operators')}>
+                  <Building className="w-4 h-4 mr-2" />
+                  Operators
+                </Button>
+                <Button variant="ghost" className="justify-start" onClick={() => navigate('/owners')}>
+                  <Crown className="w-4 h-4 mr-2" />
+                  Owners
+                </Button>
+                <Button variant="ghost" className="justify-start" onClick={() => navigate('/designers')}>
+                  <Palette className="w-4 h-4 mr-2" />
+                  Designers
+                </Button>
+                <div className="border-t pt-4 mt-4">
+                  <Button variant="ghost" className="justify-start">
+                    <Star className="w-4 h-4 mr-2" />
+                    Reviews
+                  </Button>
+                </div>
                 <div className="border-t pt-4 mt-4">
                   <div className="mb-3">
                     <ThemeToggle />