-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
122 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; | ||
| import { cva } from "class-variance-authority"; | ||
| import { cn } from "cn"; | ||
| import { ChevronDownIcon } from "lucide-react"; | ||
| import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react"; | ||
|
|
||
| const NavigationMenu = forwardRef< | ||
| ElementRef<typeof NavigationMenuPrimitive.Root>, | ||
| ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> | ||
| >(({ 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> | ||
| )); | ||
|
|
||
| const NavigationMenuList = forwardRef< | ||
| ElementRef<typeof NavigationMenuPrimitive.List>, | ||
| ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> | ||
| >(({ className, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.List | ||
| ref={ref} | ||
| className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
|
|
||
| const navigationMenuTriggerStyle = cva( | ||
| "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 font-medium text-sm 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 = forwardRef< | ||
| ElementRef<typeof NavigationMenuPrimitive.Trigger>, | ||
| ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn(navigationMenuTriggerStyle(), "group", className)} | ||
| {...props} | ||
| > | ||
| {children}{" "} | ||
| <ChevronDownIcon | ||
| className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180" | ||
| aria-hidden="true" | ||
| /> | ||
| </NavigationMenuPrimitive.Trigger> | ||
| )); | ||
|
|
||
| const NavigationMenuContent = forwardRef< | ||
| ElementRef<typeof NavigationMenuPrimitive.Content>, | ||
| ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> | ||
| >(({ className, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| "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 top-0 left-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out md:absolute md:w-auto ", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
|
|
||
| const NavigationMenuViewport = forwardRef< | ||
| ElementRef<typeof NavigationMenuPrimitive.Viewport>, | ||
| ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div className={cn("absolute top-full left-0 flex justify-center")}> | ||
| <NavigationMenuPrimitive.Viewport | ||
| className={cn( | ||
| "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-top-center overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=open]:animate-in md:w-[var(--radix-navigation-menu-viewport-width)]", | ||
| className, | ||
| )} | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| </div> | ||
| )); | ||
|
|
||
| const NavigationMenuIndicator = forwardRef< | ||
| ElementRef<typeof NavigationMenuPrimitive.Indicator>, | ||
| ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> | ||
| >(({ className, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.Indicator | ||
| ref={ref} | ||
| className={cn( | ||
| "data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in", | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" /> | ||
| </NavigationMenuPrimitive.Indicator> | ||
| )); | ||
|
|
||
| const NavigationMenuItem = NavigationMenuPrimitive.Item; | ||
| const NavigationMenuLink = NavigationMenuPrimitive.Link; | ||
|
|
||
| NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName; | ||
| NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName; | ||
| NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName; | ||
| NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; | ||
| NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName; | ||
| NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName; | ||
|
|
||
| export { | ||
| navigationMenuTriggerStyle, | ||
| NavigationMenu, | ||
| NavigationMenuList, | ||
| NavigationMenuItem, | ||
| NavigationMenuContent, | ||
| NavigationMenuTrigger, | ||
| NavigationMenuLink, | ||
| NavigationMenuIndicator, | ||
| NavigationMenuViewport, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters