import Head from 'next/head' import { FC, ReactNode } from 'react' import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { useStore } from 'hooks' import Connecting from 'components/ui/Loading' import NavigationBar from './NavigationBar/NavigationBar' import ProductMenuBar from './ProductMenuBar' import LayoutHeader from './LayoutHeader' import TestConnection from './TestConnection' interface Props { title?: string isLoading?: boolean product?: string productMenu?: ReactNode children: ReactNode hideHeader?: boolean hideIconBar?: boolean } const ProjectLayout: FC = ({ title, isLoading = false, product = '', productMenu, children, hideHeader = false, hideIconBar = false, }) => { return ( <> {title ? `${title} | Supabase` : 'Supabase'}
{/* Left-most navigation side bar to access products */} {!hideIconBar && } {/* Product menu bar */} {productMenu}
{!hideHeader && } {children}
) } export default observer(ProjectLayout) interface MenuBarWrapperProps { isLoading: boolean productMenu?: ReactNode } const MenuBarWrapper: FC = observer(({ isLoading, productMenu, children }) => { const { ui } = useStore() return <>{!isLoading && productMenu && ui.selectedProject !== undefined ? children : null} }) interface ContentWrapperProps { isLoading: boolean } const ContentWrapper: FC = observer(({ isLoading, children }) => { const { ui } = useStore() const router = useRouter() const project = ui.selectedProject const requiresDbConnection: boolean = router.pathname !== '/project/[ref]/settings/general' return ( <> {isLoading || project === undefined ? ( ) : requiresDbConnection ? (
{children}
 ) : ( <>{children} )} ) })