Navigation Menu

1import { tv } from 'tailwind-variants';
2 
3export const navigationMenuVariants = tv({
4  slots: {
5    root: `relative z-2`,
6    viewportRoot: `perspective-[2000px] z-3 absolute top-full left-0 flex w-full justify-center`,
7    viewport: [
8      `origin-top-center relative overflow-hidden w-full rounded-md border bg-popover text-popover-foreground shadow-lg`,
9      `h-[var(--radix-navigation-menu-viewport-height)] md:w-[var(--radix-navigation-menu-viewport-width)]`,
10      `data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:zoom-out-95`
11    ],
12    content: [
13      `left-0 top-0 w-full md:absolute md:w-auto`,
14      `data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in`,
15      `data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out`,
16      `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`
17    ],
18    arrow: 'relative top-[70%] rotate-45 border border-border bg-background rounded-[2px]',
19    list: `group grow flex items-center justify-center my-0 list-none`,
20    subList: `grid grid-cols-[auto_auto] list-none my-0`,
21    item: `list-none`,
22    subItem: `list-none`,
23    itemIcon: 'shrink-0',
24    trigger: [
25      `group inline-flex items-center rounded-md cursor-pointer bg-background font-medium transition-colors-200 decoration-none`,
26      `hover:bg-accent hover:text-accent-foreground`,
27      `focus:bg-accent focus:text-accent-foreground focus:outline-none`,
28      `disabled:cursor-not-allowed disabled:opacity-50`,
29      `data-[active]:bg-accent/50`,
30      `data-[state=open]:bg-accent/50`
31    ],
32    subItemContent: `flex items-start rounded-md outline-none cursor-default select-none`,
33    triggerIcon: `ml-auto transition duration-200 group-data-[state=open]:rotate-180`,
34    indicator: [
35      `absolute top-full z-2 flex mt-[1px] w-[var(--radix-navigation-menu-indicator-size)] items-end justify-center overflow-hidden transition-transform-200 ease-out translate-x-[var(--radix-navigation-menu-indicator-position)]`,
36      `data-[state=visible]:animate-in data-[state=visible]:fade-in-0`,
37      `data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0`
38    ],
39    link: [
40      `group relative w-full flex items-center rounded-md font-medium outline-none cursor-pointer decoration-none`,
41// … truncated