Organize navigation links

This commit is contained in:
gpt-engineer-app[bot]
2025-09-20 12:26:10 +00:00
parent d20bdbf730
commit 860d1c1dd0

View File

@@ -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')}>
<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
</Button>
<Button variant="ghost" className="text-sm font-medium hover:text-primary" onClick={() => navigate('/rides')}>
🎢 Rides
</Button>
</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" 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>
<Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
🏭 Manufacturers
</Button>
</div>
<div className="border-t pt-4 mt-4">
<div className="mb-3">
<ThemeToggle />