-
Notifications
You must be signed in to change notification settings - Fork 1
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
1 parent
52df31f
commit e7ca58e
Showing
9 changed files
with
216 additions
and
32 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
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
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
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,131 @@ | ||
"use client"; | ||
|
||
import * as React from "react"; | ||
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; | ||
import { cva } from "class-variance-authority"; | ||
import { ChevronDownIcon } from "@radix-ui/react-icons"; | ||
|
||
import { cn } from "@/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} | ||
<NavigationMenuViewport /> | ||
</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 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 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-brand data-[active]:text-white data-[state=open]:bg-brand data-[state=open]:text-white" | ||
); | ||
|
||
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", className)} | ||
{...props} | ||
> | ||
{children} | ||
<ChevronDownIcon | ||
aria-hidden="true" | ||
className="w-6 h-6 ml-3 transition duration-200 group-data-[state=open]:rotate-180" | ||
/> | ||
{/* <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 " /> */} | ||
</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( | ||
"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<typeof NavigationMenuPrimitive.Viewport>, | ||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> | ||
>(({ className, ...props }, ref) => ( | ||
<div className={cn("absolute left-0 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-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)]", | ||
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, | ||
}; |
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
e7ca58e
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
aafiyah – ./apps/web
aafiyah-git-main-muttakinhasib.vercel.app
aafiyah.vercel.app
aafiyah-muttakinhasib.vercel.app
aafiyah.muttakinhasib.com