Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
3.2 kB · 85 lines
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586import { Box } from '@luke-ui/react/box';import { Button } from '@luke-ui/react/button';import { IconButton } from '@luke-ui/react/icon-button';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import { rootClassName, vars } from '@luke-ui/react/theme';import { cx } from '@luke-ui/react/utils';import { useRouterState } from '@tanstack/react-router';import type { Root } from 'fumadocs-core/page-tree';import type { CSSProperties } from 'react';import { useState } from 'react';import { Dialog, DialogTrigger } from 'react-aria-components/Dialog';import { Modal, ModalOverlay } from 'react-aria-components/Modal';import { useIsDocsSidebarLayout } from '../lib/docs-container-queries.js';import { getActiveSiteDestination, siteDestinations } from '../lib/site-destinations.js';import { DocsNav, DocsNavLink, docsNavPaneProps } from './docs-nav.js';import * as styles from './docs-shell.css.js';import { SiteNav } from './site-nav.js';
const drawerSiteNavBorder = { borderBlockEnd: `1px solid ${vars.color.border.decorative}`,} as const satisfies CSSProperties;
export function DocsSiteNav({ tree }: { tree: Root }) { const pathname = useRouterState({ select: (state) => state.location.pathname }); const activeDestination = getActiveSiteDestination(pathname); const isDocsSidebarLayout = useIsDocsSidebarLayout(); const [isDrawerOpen, setIsDrawerOpen] = useState(false);
// Crossing into the desktop layout must drop modal state, not only hide the dialog with CSS. if (isDocsSidebarLayout && isDrawerOpen) { setIsDrawerOpen(false); }
return ( <SiteNav className={styles.header} hasSidebarNavigation> <DialogTrigger isOpen={isDrawerOpen} onOpenChange={setIsDrawerOpen}> {/* No bars/menu glyph in the Luke UI set; match the Theme labelled control. */} <Button className={styles.mobileTrigger} prominence="low" size="small"> Menu </Button> <ModalOverlay className={cx(rootClassName, styles.drawerOverlay)} isDismissable> <Modal className={styles.drawerModal}> <Dialog aria-label="Docs navigation" className={styles.drawerDialog}> {({ close }) => ( <Stack gap="sp16" {...docsNavPaneProps}> <Box alignItems="center" display="flex" justifyContent="space-between"> <Text elementType="span" fontWeight="heading"> Navigation </Text> <IconButton aria-label="Close docs navigation" icon="close" onPress={close} size="small" /> </Box> <Stack elementType="nav" aria-label="Site" gap="sp4" paddingBlockEnd="sp16" style={drawerSiteNavBorder} > {siteDestinations.map((destination) => ( <DocsNavLink href={destination.url} isCurrent={destination === activeDestination} key={destination.url} onNavigate={close} > {destination.label} </DocsNavLink> ))} </Stack> <DocsNav onNavigate={close} tree={tree} /> </Stack> )} </Dialog> </Modal> </ModalOverlay> </DialogTrigger> </SiteNav> );}