index.tsx39 lines · main

1	'use client'
2
3	import React from 'react'
4	import { cn } from 'ui'
5
6	import { PageContainer } from '../PageContainer'
7
8	const pageChromeClassName = 'px-4 xl:px-4'
9
10	export type PageNavProps = React.ComponentProps<'div'>
11
12	/**
13	* Full-width sub-navigation row for page chrome (wraps `NavMenu`).
14	* Sits below `PageBreadcrumbs` and outside `PageHeader`.
15	*/
16	const PageNav = ({ className, ...props }: PageNavProps) => {
17	return (
18	<PageContainer
19	data-slot="page-nav"
20	size="full"
21	className={cn('flex min-h-12 items-center border-b', pageChromeClassName)}
22	>
23	<div
24	data-slot="page-nav-menu"
25	className={cn(
26	'flex min-h-12 w-full items-center',
27	'[&>nav]:flex [&>nav]:h-12 [&>nav]:items-center [&>nav]:border-b-0',
28	'[&>nav>ul]:h-full [&>nav>ul]:items-center',
29	'[&>nav>ul>li]:h-full',
30	className
31	)}
32	{...props}
33	/>
34	</PageContainer>
35	)
36	}
37	PageNav.displayName = 'PageNav'
38
39	export { PageNav }