JumboLayout

JumboLayout is the core layout shell in the @jumbo framework. It composes a fixed header, collapsible sidebar, optional right sidebar, scrollable content area, and footer into a single configurable component. JumboLayoutProvider wraps it to supply context and the layout reducer.

Setup

Every layout group that uses the full chrome must wrap JumboLayout in JumboLayoutProvider:

tsx

// src/app/[lang]/(common)/layout.tsx
import { JumboLayout } from '@jumbo/components/JumboLayout';
import { JumboLayoutProvider } from '@jumbo/components/JumboLayout';
import { defaultLayoutConfig } from '@/config/layouts/default';
import { Header } from '@/components/Header/Header';
import { Footer } from '@/components/Footer/Footer';
import { SidebarWithMenus } from '@/components/SidebarWithMenus/SidebarWithMenus';
 
export default function CommonLayout({ children }: { children: React.ReactNode }) {
  return (
    <JumboLayoutProvider defaultLayoutConfig={defaultLayoutConfig}>
      <JumboLayout
        header={<Header />}
        sidebar={<SidebarWithMenus />}
        footer={<Footer />}
      >
        {children}
      </JumboLayout>
    </JumboLayoutProvider>
  );
}

Props

JumboLayoutProvider

Prop	Type	Default	Description
`defaultLayoutConfig`	`LayoutOptions`	required	Initial layout options passed to the reducer
`children`	`ReactNode`	required	Must include `JumboLayout`

JumboLayout

Prop	Type	Default	Description
`header`	`ReactNode`	—	Header slot (rendered above content)
`sidebar`	`ReactNode`	—	Left sidebar slot
`rightSidebar`	`ReactNode`	—	Right sidebar slot
`footer`	`ReactNode`	—	Footer slot (rendered below content)
`children`	`ReactNode`	required	Page content

Layout options

The LayoutOptions type (from @jumbo/types) controls every aspect of the layout:

typescript

// @jumbo/types/JumboLayoutTypes.ts
interface LayoutOptions {
  sidebar: LayoutSidebarOptions;
  header:  LayoutHeaderOptions;
  footer:  LayoutFooterOptions;
  content: LayoutContentOptions;
  root:    LayoutRootOptions;
  wrapper: object;
  main:    object;
}

Sidebar options

Option	Type	Default	Description
`open`	`boolean`	`true`	Whether the sidebar is open
`hide`	`boolean`	`false`	Completely remove the sidebar slot
`variant`	`SIDEBAR_VARIANTS`	`PERSISTENT`	`PERSISTENT`, `TEMPORARY`, `PERMANENT`
`style`	`SIDEBAR_STYLES`	`FULL_HEIGHT`	`FULL_HEIGHT` or `CLIPPED_UNDER_HEADER`
`view`	`SIDEBAR_VIEWS`	`FULL`	`FULL` or `MINI` (icon-only collapsed state)
`scrollType`	`SIDEBAR_SCROLL_TYPES`	`FIXED`	`FIXED` or `DEFAULT`
`anchor`	`SIDEBAR_ANCHOR_POSITIONS`	`LEFT`	`LEFT`, `RIGHT`, `TOP`, `BOTTOM`
`width`	`number`	`240`	Sidebar width in pixels
`minWidth`	`number`	`80`	Mini mode width in pixels
`drawer`	`boolean`	`true`	Use a Drawer below `drawerBreakpoint`
`drawerBreakpoint`	`Breakpoint`	`'xl'`	Breakpoint below which the drawer activates

Header options

Option	Type	Default	Description
`hide`	`boolean`	`false`	Completely remove the header slot
`fixed`	`boolean`	`true`	Stick header to top on scroll
`sx`	`SxProps`	`{ height: 80 }`	MUI sx overrides (use to set height)
`drawerBreakpoint`	`Breakpoint`	`'xl'`	Breakpoint for the hamburger menu trigger

Layout actions

The reducer accepts actions dispatched through the context hooks. Use these to update layout options from any client component:

typescript

// @jumbo/utilities/constants.ts
export enum LAYOUT_ACTIONS {
  SET_OPTIONS          = 'set-options',
  SET_SIDEBAR_OPTIONS  = 'set-sidebar-options',
  SET_HEADER_OPTIONS   = 'set-header-options',
  SET_FOOTER_OPTIONS   = 'set-footer-options',
  SET_CONTENT_OPTIONS  = 'set-content-options',
  SET_ROOT_OPTIONS     = 'set-root-options',
}

Context hooks

Hook	Provides
`useJumboLayoutSidebarOptions()`	`{ sidebarOptions, setSidebarOptions }`
`useJumboLayoutHeaderOptions()`	`{ headerOptions, setHeaderOptions }`
`useJumboLayoutFooterOptions()`	`{ footerOptions, setFooterOptions }`
`useJumboLayoutOptions()`	`{ layoutOptions, setLayoutOptions }` (full options object)

Example — toggling the sidebar from a button:

tsx

'use client';
 
import { useJumboLayoutSidebarOptions } from '@jumbo/components/JumboLayout';
 
export function SidebarToggle() {
  const { sidebarOptions, setSidebarOptions } = useJumboLayoutSidebarOptions();
 
  return (
    <button onClick={() => setSidebarOptions({ open: !sidebarOptions.open })}>
      {sidebarOptions.open ? 'Close Sidebar' : 'Open Sidebar'}
    </button>
  );
}

Server vs client

JumboLayoutProvider and JumboLayout are client components. Wrap them in a 'use client' boundary layout file. Page-level server components can then be rendered as children without any special handling.

Default layout config

The baseline config is exported from src/config/layouts/default.ts and used by the (common) layout group. Each demo layout has its own config file under src/components/Demo*Layout/config/index.ts. See the Layouts guide for a full comparison table.