mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Joshen LimandSaxon Fletcher
32a042379e
* page components * page component changes * settings but broken saving * rvert * use sheet for provider * styling * remove things * Some refactoring and fixing, added JSDocs to layouts * Smol refactor * Fix * Update JSDocs * updated scaffolding * Clean up * Spelling * Clean up FormFieldWrappers * One last clean up * Smol CSS tweak --------- Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import { PropsWithChildren } from 'react'
|
|
|
|
import { useParams } from 'common'
|
|
import { AppBannerWrapper } from 'components/interfaces/App'
|
|
import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
|
|
import { LayoutHeader } from './ProjectLayout/LayoutHeader'
|
|
import MobileNavigationBar from './ProjectLayout/NavigationBar/MobileNavigationBar'
|
|
import NavigationBar from './ProjectLayout/NavigationBar/NavigationBar'
|
|
import { ProjectContextProvider } from './ProjectLayout/ProjectContext'
|
|
|
|
export interface DefaultLayoutProps {
|
|
showProductMenu?: boolean
|
|
}
|
|
|
|
/**
|
|
* Base layout for all project pages in the dashboard, rendered as the first child on all page files within a project.
|
|
*
|
|
* A second layout as the child to this is required, and the layout depends on which section of the dashboard the page is on. (e.g Auth - AuthLayout)
|
|
*
|
|
* The base layout handles rendering the following UI components:
|
|
* - App banner (e.g for notices or incidents)
|
|
* - Mobile navigation bar
|
|
* - First level side navigation bar (e.g For navigating to Table Editor, SQL Editor, Database page, etc)
|
|
* @param showProductMenu - (Mobile only) Show button to toggle visiblity of product menu (Default: true)
|
|
*/
|
|
const DefaultLayout = ({ children, showProductMenu }: PropsWithChildren<DefaultLayoutProps>) => {
|
|
const { ref } = useParams()
|
|
return (
|
|
<ProjectContextProvider projectRef={ref}>
|
|
<AppBannerContextProvider>
|
|
<div className="flex flex-col h-screen w-screen">
|
|
{/* Top Banner */}
|
|
<AppBannerWrapper />
|
|
<div className="flex-shrink-0">
|
|
<MobileNavigationBar />
|
|
<LayoutHeader showProductMenu={showProductMenu} />
|
|
</div>
|
|
{/* Main Content Area */}
|
|
<div className="flex flex-1 w-full overflow-y-hidden">
|
|
{/* Sidebar */}
|
|
<NavigationBar />
|
|
{/* Main Content */}
|
|
<div className="flex-grow h-full overflow-y-auto">{children}</div>
|
|
</div>
|
|
</div>
|
|
</AppBannerContextProvider>
|
|
</ProjectContextProvider>
|
|
)
|
|
}
|
|
|
|
export default DefaultLayout
|