You should be able to apply the changes by either grabbing the navigation-menu.tsx I uploaded below or trying to apply the patch file using the git apply command. Though you might need to adjust the paths if you try using the patch file.
Instantly share code, notes, and snippets.
-
Star
4
(4)
You must be signed in to star a gist -
Fork
1
(1)
You must be signed in to fork a gist
-
Save kathrindc/50ae806f31e8606da863ade4db6891b8 to your computer and use it in GitHub Desktop.
Patch for shadcn/ui NavigationMenu
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
| diff --git a/app/src/components/ui/navigation-menu.tsx b/app/src/components/ui/navigation-menu.tsx | |
| index 5841fb3..b9cc3e3 100644 | |
| --- a/app/src/components/ui/navigation-menu.tsx | |
| +++ b/app/src/components/ui/navigation-menu.tsx | |
| @@ -18,7 +18,6 @@ const NavigationMenu = React.forwardRef< | |
| {...props} | |
| > | |
| {children} | |
| - <NavigationMenuViewport /> | |
| </NavigationMenuPrimitive.Root> | |
| )) | |
| NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName | |
| @@ -30,7 +29,7 @@ const NavigationMenuList = React.forwardRef< | |
| <NavigationMenuPrimitive.List | |
| ref={ref} | |
| className={cn( | |
| - "group flex flex-1 list-none items-center justify-center space-x-1", | |
| + "group/navList flex flex-1 list-none items-center justify-center space-x-1", | |
| className | |
| )} | |
| {...props} | |
| @@ -41,7 +40,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName | |
| const NavigationMenuItem = NavigationMenuPrimitive.Item | |
| const navigationMenuTriggerStyle = cva( | |
| - "group inline-flex h-9 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" | |
| + "group/navTrig inline-flex h-9 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< | |
| @@ -50,12 +49,12 @@ const NavigationMenuTrigger = React.forwardRef< | |
| >(({ className, children, ...props }, ref) => ( | |
| <NavigationMenuPrimitive.Trigger | |
| ref={ref} | |
| - className={cn(navigationMenuTriggerStyle(), "group", className)} | |
| + className={cn(navigationMenuTriggerStyle(), "group/navTrig", className)} | |
| {...props} | |
| > | |
| {children}{" "} | |
| <ChevronDownIcon | |
| - className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180" | |
| + className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]/navTrig:rotate-180" | |
| aria-hidden="true" | |
| /> | |
| </NavigationMenuPrimitive.Trigger> | |
| @@ -69,7 +68,8 @@ const NavigationMenuContent = React.forwardRef< | |
| <NavigationMenuPrimitive.Content | |
| ref={ref} | |
| className={cn( | |
| - "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 ", | |
| + "top-full w-auto 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", | |
| + "origin-top-center relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow 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)]", | |
| className | |
| )} | |
| {...props} | |
| @@ -83,7 +83,7 @@ const NavigationMenuViewport = React.forwardRef< | |
| React.ElementRef<typeof NavigationMenuPrimitive.Viewport>, | |
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> | |
| >(({ className, ...props }, ref) => ( | |
| - <div className={cn("absolute left-0 top-full flex justify-center")}> | |
| + <div className={cn("absolute left-0 z-30 top-full flex justify-center")}> | |
| <NavigationMenuPrimitive.Viewport | |
| 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 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)]", |
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
| import * as React from "react" | |
| import { ChevronDownIcon } from "@radix-ui/react-icons" | |
| import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" | |
| import { cva } from "class-variance-authority" | |
| import { cn } from "@/lib/utils" | |
| const NavigationMenu = React.forwardRef< | |
| React.ElementRef<typeof NavigationMenuPrimitive.Root>, | |
| React.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} | |
| </NavigationMenuPrimitive.Root> | |
| )) | |
| NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName | |
| const NavigationMenuList = React.forwardRef< | |
| React.ElementRef<typeof NavigationMenuPrimitive.List>, | |
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> | |
| >(({ className, ...props }, ref) => ( | |
| <NavigationMenuPrimitive.List | |
| ref={ref} | |
| className={cn( | |
| "group/navList flex flex-1 list-none items-center justify-center space-x-1", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| )) | |
| NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName | |
| const NavigationMenuItem = NavigationMenuPrimitive.Item | |
| const navigationMenuTriggerStyle = cva( | |
| "group/navTrig inline-flex h-9 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<typeof NavigationMenuPrimitive.Trigger>, | |
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> | |
| >(({ className, children, ...props }, ref) => ( | |
| <NavigationMenuPrimitive.Trigger | |
| ref={ref} | |
| className={cn(navigationMenuTriggerStyle(), "group/navTrig", className)} | |
| {...props} | |
| > | |
| {children}{" "} | |
| <ChevronDownIcon | |
| className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]/navTrig:rotate-180" | |
| aria-hidden="true" | |
| /> | |
| </NavigationMenuPrimitive.Trigger> | |
| )) | |
| NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName | |
| const NavigationMenuContent = React.forwardRef< | |
| React.ElementRef<typeof NavigationMenuPrimitive.Content>, | |
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> | |
| >(({ className, ...props }, ref) => ( | |
| <NavigationMenuPrimitive.Content | |
| ref={ref} | |
| className={cn( | |
| "top-full w-auto 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", | |
| "origin-top-center relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow 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)]", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| )) | |
| NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName | |
| const NavigationMenuLink = NavigationMenuPrimitive.Link | |
| const NavigationMenuViewport = React.forwardRef< | |
| React.ElementRef<typeof NavigationMenuPrimitive.Viewport>, | |
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> | |
| >(({ className, ...props }, ref) => ( | |
| <div className={cn("absolute left-0 z-30 top-full flex justify-center")}> | |
| <NavigationMenuPrimitive.Viewport | |
| 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 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)]", | |
| className | |
| )} | |
| ref={ref} | |
| {...props} | |
| /> | |
| </div> | |
| )) | |
| NavigationMenuViewport.displayName = | |
| NavigationMenuPrimitive.Viewport.displayName | |
| const NavigationMenuIndicator = React.forwardRef< | |
| React.ElementRef<typeof NavigationMenuPrimitive.Indicator>, | |
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> | |
| >(({ 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, | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment