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 { 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 { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { SearchDropdown } from '@/components/search/SearchDropdown'; import { SearchDropdown } from '@/components/search/SearchDropdown';
import { AuthButtons } from '@/components/auth/AuthButtons'; import { AuthButtons } from '@/components/auth/AuthButtons';
@@ -29,20 +30,43 @@ export function Header() {
{/* Desktop Navigation */} {/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-6 ml-8"> <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>
<MapPin className="w-4 h-4 mr-2" /> <DropdownMenuTrigger asChild>
Parks <Button variant="ghost" className="text-sm font-medium hover:text-primary">
</Button> <Search className="w-4 h-4 mr-2" />
<Button variant="ghost" className="text-sm font-medium hover:text-primary" onClick={() => navigate('/rides')}> Explore
🎢 Rides <ChevronDown className="w-4 h-4 ml-1" />
</Button> </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"> <Button variant="ghost" className="text-sm font-medium hover:text-primary">
<Star className="w-4 h-4 mr-2" /> <Star className="w-4 h-4 mr-2" />
Reviews Reviews
</Button> </Button>
<Button variant="ghost" className="text-sm font-medium hover:text-primary" onClick={() => navigate('/manufacturers')}>
🏭 Manufacturers
</Button>
</nav> </nav>
</div> </div>
@@ -65,6 +89,7 @@ export function Header() {
</SheetTrigger> </SheetTrigger>
<SheetContent side="right" className="w-[300px] sm:w-[400px]"> <SheetContent side="right" className="w-[300px] sm:w-[400px]">
<div className="flex flex-col gap-4 mt-8"> <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')}> <Button variant="ghost" className="justify-start" onClick={() => navigate('/parks')}>
<MapPin className="w-4 h-4 mr-2" /> <MapPin className="w-4 h-4 mr-2" />
Parks Parks
@@ -72,13 +97,27 @@ export function Header() {
<Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}> <Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}>
🎢 Rides 🎢 Rides
</Button> </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')}> <Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
🏭 Manufacturers 🏭 Manufacturers
</Button> </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="border-t pt-4 mt-4">
<div className="mb-3"> <div className="mb-3">
<ThemeToggle /> <ThemeToggle />