Add smooth transitions and reorder menu items

This commit is contained in:
gpt-engineer-app[bot]
2025-11-05 19:33:59 +00:00
parent 3f95e447bb
commit 45a5dadd29
2 changed files with 7 additions and 7 deletions

View File

@@ -133,12 +133,12 @@ export function Header() {
<li> <li>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
<Link <Link
to="/parks" to="/rides"
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent/20 focus:bg-accent/20" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent/20 focus:bg-accent/20"
> >
<div className="text-sm font-medium leading-none">Parks</div> <div className="text-sm font-medium leading-none">Rides</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground"> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
Browse theme parks around the world Discover exciting rides and attractions
</p> </p>
</Link> </Link>
</NavigationMenuLink> </NavigationMenuLink>
@@ -146,12 +146,12 @@ export function Header() {
<li> <li>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
<Link <Link
to="/rides" to="/parks"
className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent/20 focus:bg-accent/20" className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent/20 focus:bg-accent/20"
> >
<div className="text-sm font-medium leading-none">Rides</div> <div className="text-sm font-medium leading-none">Parks</div>
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground"> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
Discover exciting rides and attractions Browse theme parks around the world
</p> </p>
</Link> </Link>
</NavigationMenuLink> </NavigationMenuLink>

View File

@@ -80,7 +80,7 @@ const NavigationMenuViewport = React.forwardRef<
<div className={cn("absolute left-0 top-full flex justify-center")}> <div className={cn("absolute left-0 top-full flex justify-center")}>
<NavigationMenuPrimitive.Viewport <NavigationMenuPrimitive.Viewport
className={cn( className={cn(
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)] transition-all duration-300 ease-in-out",
className, className,
)} )}
ref={ref} ref={ref}