Implementation:FlowiseAI Flowise MainLayout
| Knowledge Sources | |
|---|---|
| Domains | UI Layout, Application Shell |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
MainLayout is the primary application shell component that composes the fixed header AppBar, the left Sidebar drawer, and the main content area rendered via React Router's Outlet.
Description
The MainLayout component establishes the top-level page structure for authenticated views. It renders a Material UI AppBar with a fixed Toolbar containing the Header component, a Sidebar component for left navigation, and a styled Main area that adjusts its margin and width based on whether the drawer is open or closed. The drawer state is managed via the Redux customization.opened property. On screens smaller than lg, the drawer automatically closes. The Main styled component applies smooth CSS transitions when the drawer toggles and uses responsive margin/padding rules for different breakpoints.
Usage
Use this component as the layout wrapper for all authenticated routes. It is referenced in the React Router configuration as the element for the root path, wrapping child routes that render inside the Outlet.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/layout/MainLayout/index.jsx
- Lines: 1-105
Signature
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({ ... })
)
const MainLayout = () => { ... }
export default MainLayout
Import
import MainLayout from '@/layout/MainLayout'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | - | - | This component accepts no props. It reads customization.opened from Redux and uses useMediaQuery to detect screen size. |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX | React.ReactElement | A Box with display: flex containing: a fixed AppBar with Header, a Sidebar drawer, and a Main content area rendering the Outlet for child routes. |
Usage Examples
Basic Usage
import MainLayout from '@/layout/MainLayout'
const routes = {
path: '/',
element: <MainLayout />,
children: [
{ path: '/chatflows', element: <Chatflows /> },
{ path: '/agentflows', element: <Agentflows /> }
]
}