i have a problem navigation dropdown sort

[hamitdaylak]

i have a problem
In the dropdown menu, all of them open at the beginning, I tried many things when hovering over them with the mouse, but they still open on the left, please help.

[hamitdaylak]

`import React from 'react';
import Link from "next/link";
import { cn } from "@/lib/utils";
import { Icons } from "@/components/icons";
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const components = [
{
title: "Alert Dialog",
href: "/docs/primitives/alert-dialog",
description: "A modal dialog that interrupts the user with important content and expects a response.",
},
{
title: "Hover Card",
href: "/docs/primitives/hover-card",
description: "For sighted users to preview content available behind a link.",
},
{
title: "Progress",
href: "/docs/primitives/progress",
description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
},
{
title: "Scroll-area",
href: "/docs/primitives/scroll-area",
description: "Visually or semantically separates content.",
},
{
title: "Tabs",
href: "/docs/primitives/tabs",
description: "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
},
{
title: "Tooltip",
href: "/docs/primitives/tooltip",
description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
},
];

export function ListMenus() {
return (



<Icons.gateiosm />  Gate.io

• 
  
  
  <Icons.gateio className="h-6 w-6" />
  
  
  Gateio
  
  
  

  
  USD-M,USD-C,Spot Buy Sell Whale Signals
  

  
  
  
  


Gate.io Futures Signals Data For USD-M V1


Gate.io Futures Signals Data For USD-C V1


Gate.io Spot Buy Sell Signals Data USD

<Icons.binance className="min-w-0" />   Binance

• 
  
  
  <Icons.binancebig className="h-6 w-6 text-center justify-center" />
  
  
  Binance
  
  
  

  
  USD-M,USD-C,Spot Buy Sell Whale Signals
  

  
  
  
  


Binance Futures Signals Data For USD-M V1


Binance Futures Signals Data For USD-C V1


Binance Spot Buy Sell Signals Data USD

<Icons.bybit className="min-w-0" />   Bybit

• 
  
  
  <Icons.bybitbig className="h-6 w-6 text-center justify-center" />
  
  
  Bybit
  
  
  

  
  USD-M,USD-C,Spot Buy Sell Whale Signals
  

  
  
  
  


Bybit Futures Signals Data For USD-M V1


Bybit Futures Signals Data For USD-C V1


Bybit Spot Buy Sell Signals Data USD

<Icons.bybit className="min-w-0" />   Bybit

• 
  
  
  <Icons.bybitbig className="h-6 w-6 text-center justify-center" />
  
  
  Bybit
  
  
  

  
  USD-M,USD-C,Spot Buy Sell Whale Signals
  

  
  
  
  


Bybit Futures Signals Data For USD-M V1


Bybit Futures Signals Data For USD-C V1


Bybit Spot Buy Sell Signals Data USD

<Icons.bybit className="min-w-0" />   Bybit

• 
  
  
  <Icons.bybitbig className="h-6 w-6 text-center justify-center" />
  
  
  Bybit
  
  
  

  
  USD-M,USD-C,Spot Buy Sell Whale Signals
  

  
  
  
  


Bybit Futures Signals Data For USD-M V1


Bybit Futures Signals Data For USD-C V1


Bybit Spot Buy Sell Signals Data USD

<Icons.bybit className="min-w-0" />   Bybit

• 
  
  
  <Icons.bybitbig className="h-6 w-6 text-center justify-center" />
  
  
  Bybit
  
  
  

  
  USD-M,USD-C,Spot Buy Sell Whale Signals
  

  
  
  
  


Bybit Futures Signals Data For USD-M V1


Bybit Futures Signals Data For USD-C V1


Bybit Spot Buy Sell Signals Data USD

Components

{components.map((component) => (

{component.description}

))}

Documentation





);
}

const ListItem = React.forwardRef<
React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a"> & { title: string }

(({ className, title, children, ...props }, ref) => {
return (

<a
ref={ref}
className={cn(
"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",
className
)}
{...props}
>

{title}

{children}

);
});
ListItem.displayName = "ListItem";
`

[hamitdaylak]

`import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef

(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Root
ref={ref}
className={cn(
"relative z-10 flex max-w-max flex-1 items-center justify-center",
className
)}
{...props}

{children}
<NavigationMenuViewport />

</NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.List
ref={ref}
className={cn(
"group flex flex-1 list-none items-center justify-center space-x-1",
className
)}
{...props}
/>
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Item
ref={ref}
className={cn("navigation-menu-item", className)}
{...props}
/>
))
NavigationMenuItem.displayName = NavigationMenuPrimitive.Item.displayName

const navigationMenuTriggerStyle = cva(
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef

(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Trigger
ref={ref}
className={cn(navigationMenuTriggerStyle(), "group", className)}
{...props}

{children}{" "}
<ChevronDown
  className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
  aria-hidden="true"
/>

</NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Content
ref={ref}
className={cn(
"navigation-menu-content left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
className
)}
{...props}
/>
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => (

)) NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Indicator
ref={ref}
className={cn(
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
className
)}
{...props}

<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />

</NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
NavigationMenuPrimitive.Indicator.displayName

export {
navigationMenuTriggerStyle,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
}
`

[hamitdaylak]

https://ui.shadcn.com/docs/components/navigation-menu