mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 08:31:12 -05:00
Refactor: Improve mobile header and navigation
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield, FerrisWheel, Factory } from 'lucide-react';
|
||||
import { Search, Menu, Sparkles, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield, FerrisWheel, Factory } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
||||
@@ -7,137 +7,240 @@ 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 { MobileSearch } from '@/components/search/MobileSearch';
|
||||
import { AuthButtons } from '@/components/auth/AuthButtons';
|
||||
import { ThemeToggle } from '@/components/theme/ThemeToggle';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { useIsMobile } from '@/hooks/use-mobile';
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
|
||||
export function Header() {
|
||||
const navigate = useNavigate();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
|
||||
const { isModerator } = useUserRole();
|
||||
return <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-16 items-center justify-between px-4">
|
||||
{/* Logo and Brand */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/" className="flex items-center">
|
||||
<h1 className="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
|
||||
ThrillWiki
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-6 ml-8">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors">
|
||||
<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')} className="hover:!bg-accent hover:!text-accent-foreground">
|
||||
<MapPin className="w-4 h-4 mr-2" />
|
||||
Parks
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => navigate('/rides')} className="hover:!bg-accent hover:!text-accent-foreground">
|
||||
<FerrisWheel className="w-4 h-4 mr-2" />
|
||||
Rides
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => navigate('/manufacturers')} className="hover:!bg-accent hover:!text-accent-foreground">
|
||||
<Factory className="w-4 h-4 mr-2" />
|
||||
Manufacturers
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => navigate('/operators')} className="hover:!bg-accent hover:!text-accent-foreground">
|
||||
<Building className="w-4 h-4 mr-2" />
|
||||
Operators
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => navigate('/owners')} className="hover:!bg-accent hover:!text-accent-foreground">
|
||||
<Crown className="w-4 h-4 mr-2" />
|
||||
Owners
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => navigate('/designers')} className="hover:!bg-accent hover:!text-accent-foreground">
|
||||
<Palette className="w-4 h-4 mr-2" />
|
||||
Designers
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="flex-1 max-w-xl mx-4">
|
||||
<SearchDropdown />
|
||||
</div>
|
||||
|
||||
{/* User Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{isModerator() && (
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link to="/admin" className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
Admin
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
<ThemeToggle />
|
||||
<AuthButtons />
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="md:hidden">
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
</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
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-40 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-14 md:h-16 items-center justify-between px-3 md:px-4">
|
||||
{/* Mobile: Menu + Logo */}
|
||||
<div className="flex items-center gap-2 md:gap-6 flex-1 md:flex-initial">
|
||||
{/* Mobile Menu */}
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="md:hidden h-9 w-9">
|
||||
<Menu className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
</Button>
|
||||
<Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}>
|
||||
<FerrisWheel className="w-4 h-4 mr-2" />
|
||||
Rides
|
||||
</Button>
|
||||
<Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
|
||||
<Factory className="w-4 h-4 mr-2" />
|
||||
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 />
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="w-[280px] sm:w-[320px]">
|
||||
<nav className="flex flex-col gap-1 mt-8">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2 px-3">
|
||||
Explore
|
||||
</h3>
|
||||
</div>
|
||||
<Button variant="outline" className="w-full mb-2">
|
||||
Sign In
|
||||
</Button>
|
||||
<Button className="w-full bg-gradient-to-r from-primary to-accent">
|
||||
Join ThrillWiki
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<Link
|
||||
to="/parks"
|
||||
className="px-3 py-2.5 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Parks
|
||||
</Link>
|
||||
<Link
|
||||
to="/rides"
|
||||
className="px-3 py-2.5 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Rides
|
||||
</Link>
|
||||
<Link
|
||||
to="/manufacturers"
|
||||
className="px-3 py-2.5 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Manufacturers
|
||||
</Link>
|
||||
<Link
|
||||
to="/designers"
|
||||
className="px-3 py-2.5 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Designers
|
||||
</Link>
|
||||
<Link
|
||||
to="/operators"
|
||||
className="px-3 py-2.5 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Operators
|
||||
</Link>
|
||||
<Link
|
||||
to="/owners"
|
||||
className="px-3 py-2.5 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Property Owners
|
||||
</Link>
|
||||
{isModerator() && (
|
||||
<>
|
||||
<div className="my-2 border-t border-border" />
|
||||
<Link
|
||||
to="/admin"
|
||||
className="px-3 py-2.5 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Admin
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
|
||||
<Sparkles className="h-5 w-5 md:h-6 md:w-6 text-primary" />
|
||||
<span className="font-bold text-lg md:text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
|
||||
ThrillWiki
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-1">
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger className="h-9">Explore</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid w-[400px] gap-3 p-4">
|
||||
<li>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to="/parks"
|
||||
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">Parks</div>
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
Browse theme parks around the world
|
||||
</p>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to="/rides"
|
||||
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">Rides</div>
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
Discover exciting rides and attractions
|
||||
</p>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to="/manufacturers"
|
||||
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">Manufacturers</div>
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
Explore ride manufacturers
|
||||
</p>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to="/designers"
|
||||
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">Designers</div>
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
View ride designers
|
||||
</p>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to="/operators"
|
||||
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">Operators</div>
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
Find park operators
|
||||
</p>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavigationMenuLink asChild>
|
||||
<Link
|
||||
to="/owners"
|
||||
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">Property Owners</div>
|
||||
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||
View property owners
|
||||
</p>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
{isModerator() && (
|
||||
<Button variant="ghost" size="sm" className="h-9" asChild>
|
||||
<Link to="/admin">Admin</Link>
|
||||
</Button>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Right side: Search, Theme, Auth */}
|
||||
<div className="flex items-center gap-1 md:gap-2">
|
||||
{/* Desktop Search */}
|
||||
<div className="hidden lg:block w-80 xl:w-96">
|
||||
<SearchDropdown />
|
||||
</div>
|
||||
|
||||
{/* Mobile Search Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden h-9 w-9"
|
||||
onClick={() => setMobileSearchOpen(true)}
|
||||
>
|
||||
<Search className="h-5 w-5" />
|
||||
<span className="sr-only">Search</span>
|
||||
</Button>
|
||||
|
||||
<ThemeToggle />
|
||||
<AuthButtons />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>;
|
||||
</header>
|
||||
|
||||
{/* Mobile Search Modal */}
|
||||
<MobileSearch open={mobileSearchOpen} onOpenChange={setMobileSearchOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user