DocsMobileNav.tsx60 lines · main

1	import { Menu } from 'lucide-react'
2	import { useEffect, useState } from 'react'
3	import { Button, Sheet, SheetContent, SheetHeader, SheetTitle } from 'ui'
4
5	import type { ShowApiKey } from '../../Docs/Docs.types'
6	import { LangSelector } from '../../Docs/LangSelector'
7	import { DocsMenu } from '@/components/interfaces/Integrations/DataApi/DocsMenu'
8	import { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
9
10	interface DocsMobileNavProps {
11	activePage: string
12	menu: Array<ProductMenuGroup>
13	selectedLang: 'js' | 'bash'
14	selectedApiKey: ShowApiKey
15	setSelectedLang: (lang: 'js' | 'bash') => void
16	setSelectedApiKey: (key: ShowApiKey) => void
17	}
18
19	export const DocsMobileNav = ({
20	activePage,
21	menu,
22	selectedLang,
23	selectedApiKey,
24	setSelectedLang,
25	setSelectedApiKey,
26	}: DocsMobileNavProps) => {
27	const [open, setOpen] = useState(false)
28
29	// Close mobile nav when the active page changes
30	useEffect(() => {
31	setOpen(false)
32	}, [activePage])
33
34	return (
35	<>
36	<div className="sticky top-0 z-10 flex lg:hidden items-center border-b bg-surface-100 px-4 py-3">
37	<Button type="default" icon={<Menu size={16} />} onClick={() => setOpen(true)}>
38	Menu
39	</Button>
40	</div>
41
42	<Sheet open={open} onOpenChange={setOpen}>
43	<SheetContent side="left" size="content" className="w-72 overflow-y-auto">
44	<SheetHeader className="border-b-0">
45	<SheetTitle>Data API Docs</SheetTitle>
46	</SheetHeader>
47	<div className="flex flex-col gap-y-6 px-5 pb-6">
48	<LangSelector
49	selectedLang={selectedLang}
50	selectedApiKey={selectedApiKey}
51	setSelectedLang={setSelectedLang}
52	setSelectedApiKey={setSelectedApiKey}
53	/>
54	<DocsMenu activePage={activePage} menu={menu} />
55	</div>
56	</SheetContent>
57	</Sheet>
58	</>
59	)
60	}