4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tf64,"use client"; import { NavigationMenu } from "@base-ui/react/navigation-menu"; import { cn } from "../../../lib/utils"; import styles from "./navigation-menu.module.css"; function NavigationMenuRoot({ className, ...props }: NavigationMenu.Root.Props) { return ; } function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef) { return ; } function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef) { return ; } function NavigationMenuTrigger({ className, ...props }: NavigationMenu.Trigger.Props) { return ( ); } function NavigationMenuContent({ className, ...props }: NavigationMenu.Content.Props) { return ( ); } function NavigationMenuIcon({ className, ...props }: React.ComponentPropsWithRef) { return ; } function NavigationMenuLink({ className, ...props }: NavigationMenu.Link.Props) { return ; } function NavigationMenuPortal({ children, ...props }: NavigationMenu.Portal.Props) { return {children}; } function NavigationMenuBackdrop({ className, ...props }: NavigationMenu.Backdrop.Props) { return ( ); } function NavigationMenuPositioner({ className, children, ...props }: NavigationMenu.Positioner.Props) { return ( {children} ); } function NavigationMenuPopup({ className, children, ...props }: NavigationMenu.Popup.Props) { return ( {children} ); } function NavigationMenuArrow({ className, ...props }: NavigationMenu.Arrow.Props) { return ( ); } function NavigationMenuViewport({ className, ...props }: NavigationMenu.Viewport.Props) { return ( ); } const navigationMenuTriggerStyle = () => styles.trigger; export { NavigationMenuRoot as NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuIcon, NavigationMenuContent, NavigationMenuLink, NavigationMenuPortal, NavigationMenuBackdrop, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuArrow, NavigationMenuViewport, navigationMenuTriggerStyle, }; 51:T1806,.root { position: relative; display: flex; justify-content: center; width: 100%; z-index: 100; } .list { display: flex; justify-content: center; padding: 0.25rem; border-radius: var(--radius-lg); list-style: none; margin: 0; } .trigger { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0.5rem 0.75rem; outline: none; user-select: none; font-weight: 400; line-height: 1; border-radius: var(--radius); font-size: 0.875rem; cursor: pointer; transition: background-color 200ms ease; @media (hover: hover) { &:hover { background-color: var(--mix-card-33-bg); } } &[data-popup-open] { background-color: var(--mix-card-33-bg); } &:focus-visible { position: relative; outline: 2px solid var(--ring); outline-offset: -1px; } } .content { border-radius: 6px; background-image: linear-gradient( 180deg, oklch(from var(--accent) l c h / 0.1) 0%, oklch(from var(--accent) l c h / 0.3) 100% ); box-sizing: border-box; width: 100%; height: 100%; animation-duration: 150ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); &[data-starting-style][data-activation-direction="left"] { animation-name: contentEnterFromLeft; } &[data-starting-style][data-activation-direction="right"] { animation-name: contentEnterFromRight; } &[data-ending-style][data-activation-direction="left"] { animation-name: contentExitToLeft; } &[data-ending-style][data-activation-direction="right"] { animation-name: contentExitToRight; } } .popup { padding: 0.5rem; position: relative; background-color: var(--background); overflow: visible; border-radius: 12px; box-sizing: border-box; width: var(--popup-width); height: var(--popup-height); transform-origin: top center; box-shadow: 0 0 0 1px oklch(from var(--muted) l c h / 0.3), 0px 1px 1px oklch(from var(--muted) l c h / 0.2), 0px 4px 8px oklch(from var(--muted) l c h / 0.2); transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1), height 250ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1); &[data-starting-style] { opacity: 0; transform: scale(0.95); } &[data-ending-style] { opacity: 0; transform: scale(0.95); } &[data-starting-style][data-activation-direction="left"] { animation-name: enterFromLeft; animation-duration: 150ms; animation-timing-function: ease; } &[data-starting-style][data-activation-direction="right"] { animation-name: enterFromRight; animation-duration: 150ms; animation-timing-function: ease; } &[data-ending-style][data-activation-direction="left"] { animation-name: exitToLeft; animation-duration: 150ms; animation-timing-function: ease; } &[data-ending-style][data-activation-direction="right"] { animation-name: exitToRight; animation-duration: 150ms; animation-timing-function: ease; } } .positioner { --duration: 0.25s; box-sizing: border-box; transition-property: top, left, right, bottom; transition-duration: var(--duration); transition-timing-function: var(--ease-out-expo); width: var(--positioner-width); height: var(--positioner-height); max-width: var(--available-width); &::before { content: ""; position: absolute; } &[data-side="top"]::before { left: 0; right: 0; bottom: -10px; height: 10px; } &[data-side="bottom"]::before { left: 0; right: 0; top: -10px; height: 10px; } &[data-side="left"]::before { top: 0; bottom: 0; right: -10px; width: 10px; } &[data-side="right"]::before { top: 0; bottom: 0; left: -10px; width: 10px; } &[data-instant] { transition: none; } } .viewport { position: relative; overflow: hidden; width: 100%; height: 100%; } .link { all: unset; cursor: pointer; display: block; outline: none; text-decoration: none; user-select: none; border-radius: 6px; line-height: 1; padding: 0.5rem 0.5rem 0.5rem 0.75rem; transition: background-color 0.2s ease; @media (hover: hover) { &:hover { background-color: oklch(from var(--secondary) l c h / 0.6); } } &[data-selected] { background-color: oklch(from var(--secondary) l c h / 0.6); } &:focus-visible { position: relative; outline: 2px solid var(--ring); outline-offset: -1px; } } .chevron { transition: transform 0.2s ease; &[data-popup-open] { transform: rotate(180deg); } } .arrow { display: flex; transition: left 0.25s var(--easing); &[data-side="top"] { bottom: -8px; rotate: 180deg; } &[data-side="bottom"] { top: -8px; rotate: 0deg; } &[data-side="left"] { right: -13px; rotate: 90deg; } &[data-side="right"] { left: -13px; rotate: -90deg; } } .arrowFill { fill: var(--background); } .arrowOuterStroke { stroke: oklch(from var(--muted) l c h / 0.3); } @keyframes enterFromRight { from { opacity: 0; transform: translateX(200px); } to { opacity: 1; transform: translateX(0); } } @keyframes enterFromLeft { from { opacity: 0; transform: translateX(-200px); } to { opacity: 1; transform: translateX(0); } } @keyframes exitToRight { to { opacity: 0; transform: translateX(200px); } } @keyframes exitToLeft { to { opacity: 0; transform: translateX(-200px); } } @keyframes contentEnterFromRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } @keyframes contentEnterFromLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @keyframes contentExitToRight { from { opacity: 1; } to { opacity: 0; transform: translateX(10px); } } @keyframes contentExitToLeft { from { opacity: 1; } to { opacity: 0; transform: translateX(-10px); } } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"registry/brook/ui/navigation-menu/navigation-menu.tsx","content":"$50","type":"registry:file","target":"~/components/ui/navigation-menu/navigation-menu.tsx"},{"path":"registry/brook/ui/navigation-menu/navigation-menu.module.css","content":"$51","type":"registry:file","target":"~/components/ui/navigation-menu/navigation-menu.module.css"}],"className":"h-[70svh] min-h-80"}]]}]