SettingsLayout.tsx43 lines · main

1	import { useRouter } from 'next/router'
2	import type { PropsWithChildren } from 'react'
3
4	import { ProjectLayout } from '../ProjectLayout'
5	import { useGenerateSettingsMenu } from './SettingsMenu.utils'
6	import { ProductMenu } from '@/components/ui/ProductMenu'
7	import { withAuth } from '@/hooks/misc/withAuth'
8
9	/**
10	* Menu-only component for the settings section. Used by the desktop sidebar and by the
11	* mobile sheet submenu. Must not wrap ProjectLayout so that opening the settings submenu
12	* in the mobile sheet does not overwrite registerOpenMenu and break the menu button.
13	*/
14	export const SettingsProductMenu = () => {
15	const router = useRouter()
16
17	const page = router.pathname.includes('billing')
18	? router.pathname.split('/')[5]
19	: router.pathname.split('/')[4]
20
21	const menu = useGenerateSettingsMenu()
22
23	return <ProductMenu page={page} menu={menu} />
24	}
25
26	interface SettingsLayoutProps {
27	title: string
28	}
29
30	export const SettingsLayout = ({ title, children }: PropsWithChildren<SettingsLayoutProps>) => {
31	return (
32	<ProjectLayout
33	isBlocking={false}
34	product="settings"
35	browserTitle={{ section: title }}
36	productMenu={<SettingsProductMenu />}
37	>
38	{children}
39	</ProjectLayout>
40	)
41	}
42
43	export default withAuth(SettingsLayout)