StudioMobileSheetNav.tsx62 lines · main

1	import type { ReactNode } from 'react'
2	import { CommandWrapper, MobileSheetNav } from 'ui-patterns'
3
4	import {
5	SIDEBAR_KEYS,
6	type TYPEOF_SIDEBAR_KEYS,
7	} from '../../ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
8	import type { MobileSheetContentType } from './MobileSheetContext'
9	import { useMobileSheet } from './MobileSheetContext'
10	import { CommandMenuInnerContent } from '@/components/interfaces/App/CommandMenu/CommandMenu'
11	import { sidebarManagerState, useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
12
13	function isSidebarId(content: unknown): content is TYPEOF_SIDEBAR_KEYS {
14	return (
15	typeof content === 'string' &&
16	Object.values(SIDEBAR_KEYS).includes(content as TYPEOF_SIDEBAR_KEYS)
17	)
18	}
19
20	function getSheetChildren(
21	content: MobileSheetContentType,
22	activeSidebar: { id: string; component?: () => ReactNode } | null
23	): ReactNode {
24	if (content === null) return null
25	if (content === 'search') {
26	return (
27	<CommandWrapper className="h-full flex flex-col bg-background">
28	<CommandMenuInnerContent />
29	</CommandWrapper>
30	)
31	}
32	if (isSidebarId(content) && activeSidebar?.id === content) {
33	return activeSidebar.component?.() ?? null
34	}
35	if (!isSidebarId(content)) return content
36	return null
37	}
38
39	const StudioMobileSheetNav = () => {
40	const { content, setContent } = useMobileSheet()
41	const { activeSidebar } = useSidebarManagerSnapshot()
42	const sheetChildren = getSheetChildren(content, activeSidebar ?? null)
43
44	const handleOpenChange = (open: boolean) => {
45	if (!open) {
46	setContent(null)
47	sidebarManagerState.closeActive()
48	}
49	}
50
51	return (
52	<MobileSheetNav
53	open={content !== null}
54	onOpenChange={handleOpenChange}
55	shouldCloseOnViewportResize={!activeSidebar}
56	>
57	{sheetChildren}
58	</MobileSheetNav>
59	)
60	}
61
62	export { StudioMobileSheetNav }