MobileSheetNav.tsx63 lines · main

1	'use client'
2
3	import { useRouter } from 'next/router'
4	import { useEffect } from 'react'
5	import { ErrorBoundary } from 'react-error-boundary'
6	import { useWindowSize } from 'react-use'
7	import { CommandEmpty, Sheet, SheetContent } from 'ui'
8	import { cn } from 'ui/src/lib/utils'
9
10	const MobileSheetNav: React.FC<{
11	children: React.ReactNode
12	open?: boolean
13	onOpenChange(open: boolean): void
14	className?: string
15	shouldCloseOnRouteChange?: boolean
16	shouldCloseOnViewportResize?: boolean
17	}> = ({
18	children,
19	open = false,
20	onOpenChange,
21	className,
22	shouldCloseOnRouteChange = true,
23	shouldCloseOnViewportResize = true,
24	}) => {
25	const router = useRouter()
26	const { width } = useWindowSize()
27
28	// Use full asPath (including query) so the sheet closes when navigating to the same path with
29	// different query params (e.g. Integrations submenu: All vs Wrappers vs Postgres Modules).
30	const fullPath = router?.asPath ?? ''
31	useEffect(() => {
32	if (shouldCloseOnRouteChange) {
33	onOpenChange(false)
34	}
35	}, [fullPath])
36
37	useEffect(() => {
38	if (shouldCloseOnViewportResize) {
39	onOpenChange(false)
40	}
41	}, [width])
42
43	return (
44	<Sheet open={open} onOpenChange={onOpenChange}>
45	<SheetContent
46	id="mobile-sheet-content"
47	aria-describedby={undefined}
48	showClose={false}
49	size="full"
50	side="bottom"
51	className={cn(
52	'rounded-t-lg bg-background overflow-hidden overflow-y-scroll h-[85dvh] md:max-h-[500px]',
53	className
54	)}
55	>
56	<ErrorBoundary FallbackComponent={() => <CommandEmpty />}>{children}</ErrorBoundary>
57	</SheetContent>
58	</Sheet>
59	)
60	}
61
62	export { MobileSheetNav }
63	export default MobileSheetNav