Implementation:FlowiseAI Flowise Sidebar
| Knowledge Sources | |
|---|---|
| Domains | UI Layout, Sidebar |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Sidebar is a React component that renders the application's left navigation drawer, switching between a persistent drawer on desktop and a temporary overlay drawer on mobile, and only displaying when the user is authenticated.
Description
The Sidebar component wraps a Material UI Drawer containing the LogoSection (visible on mobile), a MenuList for primary navigation items, and a CloudMenuList for cloud-specific actions. It uses PerfectScrollbar on browser views and a plain Box on mobile for scrolling. The drawer variant is persistent on medium-and-up breakpoints and temporary on smaller screens. The component reads the isAuthenticated flag from the Redux auth slice and only renders the drawer content when the user is logged in.
Usage
Use this component within the MainLayout to provide the left sidebar navigation panel. It receives its open/close state and toggle handler from the parent MainLayout component.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/layout/MainLayout/Sidebar/index.jsx
- Lines: 1-107
Signature
const Sidebar = ({ drawerOpen, drawerToggle, window }) => { ... }
Sidebar.propTypes = {
drawerOpen: PropTypes.bool,
drawerToggle: PropTypes.func,
window: PropTypes.object
}
export default Sidebar
Import
import Sidebar from './Sidebar'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| drawerOpen | bool | Yes | Controls whether the sidebar drawer is open or closed. |
| drawerToggle | func | Yes | Callback function invoked when the drawer should be toggled (e.g., when the overlay is clicked on mobile). |
| window | object | No | Optional window object used to determine the drawer container; defaults to the document body. |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX | React.ReactElement | A Box wrapping a Drawer that contains the logo section, MenuList, and CloudMenuList with scrollable content. Only renders the drawer when the user is authenticated. |
Usage Examples
Basic Usage
import Sidebar from './Sidebar'
const MainLayout = () => {
const [drawerOpen, setDrawerOpen] = useState(true)
return (
<Box sx={{ display: 'flex' }}>
<Sidebar
drawerOpen={drawerOpen}
drawerToggle={() => setDrawerOpen(!drawerOpen)}
/>
<main>
<Outlet />
</main>
</Box>
)
}