JumboLayout

JumboLayout is the core layout shell component of the @jumbo framework. It composes the header, sidebar, right sidebar, footer, and main content area, and reads all configuration from the nearest JumboLayoutProvider.

Import

typescript

import { JumboLayout, JumboLayoutProvider } from '@jumbo/components';

JumboLayoutProvider

Wrap your layout shell with JumboLayoutProvider to supply the initial layout configuration. Every layout variant in src/layouts/ follows this pattern.

Props

Prop	Type	Required	Description
`layoutConfig`	`LayoutOptions`	Yes	Initial layout configuration object
`debugOptions`	`{ name: string }`	No	Development helper — logs layout name
`children`	`ReactNode`	Yes	Must contain a `JumboLayout`

Usage

tsx

// src/layouts/StretchedLayout/StretchedLayout.tsx
import { JumboLayout, JumboLayoutProvider } from '@jumbo/components';
import { defaultLayoutConfig } from '@/config/layouts/default';
 
export function StretchedLayout() {
  return (
    <JumboLayoutProvider
      layoutConfig={defaultLayoutConfig}
      debugOptions={{ name: 'StretchedLayout' }}
    >
      <JumboLayout
        header={<Header />}
        footer={<Footer />}
        sidebar={<Sidebar menus={getMenus()} />}
      >
        <Outlet />
      </JumboLayout>
    </JumboLayoutProvider>
  );
}

JumboLayout

Renders the full layout frame using slots for each region.

Props

Prop	Type	Required	Description
`header`	`ReactNode`	No	Content rendered in the header region
`sidebar`	`ReactNode`	No	Content rendered in the left sidebar
`rightSidebar`	`ReactNode`	No	Content rendered in the right sidebar
`footer`	`ReactNode`	No	Content rendered in the footer
`children`	`ReactNode`	Yes	Main content area; React Router `<Outlet />` goes here

LayoutOptions type

Defined in @jumbo/types/JumboLayoutTypes.ts. Every key is optional unless marked.

typescript

interface LayoutOptions {
  header:       LayoutHeaderOptions;
  sidebar:      LayoutSidebarOptions;
  footer:       LayoutFooterOptions;
  rightSidebar?: LayoutRightSidebarOptions;
  content:      LayoutContentOptions;
  root:         LayoutRootOptions;
  wrapper:      LayoutWrapperOptions;
  main:         LayoutMainOptions;
}

LayoutSidebarOptions

Key	Type	Default	Description
`open`	`boolean`	`true`	Whether the sidebar starts open
`hide`	`boolean`	`false`	Removes the sidebar from the DOM entirely
`variant`	`SIDEBAR_VARIANTS`	`'persistent'`	`persistent`, `temporary`, or `permanent`
`style`	`SIDEBAR_STYLES`	`'full-height'`	`full-height` or `clipped-under-header`
`view`	`SIDEBAR_VIEWS`	`'full'`	`full` (labels + icons) or `mini` (icons only)
`anchor`	`SIDEBAR_ANCHOR_POSITIONS`	`'left'`	`left`, `right`, `top`, or `bottom`
`width`	`number`	`240`	Expanded width in pixels
`minWidth`	`number`	`80`	Collapsed/mini width in pixels
`drawerBreakpoint`	MUI `Breakpoint`	`'xl'`	Below this breakpoint, sidebar becomes a drawer
`scrollType`	`SIDEBAR_SCROLL_TYPES`	`'fixed'`	`fixed` or `default` scroll behavior

LayoutHeaderOptions

Key	Type	Default	Description
`hide`	`boolean`	`false`	Removes the header
`fixed`	`boolean`	`true`	Sticks the header to the top
`sx.height`	`number`	`80`	Header height in pixels
`spreadOut`	`boolean`	—	Extends header to full viewport width
`drawerBreakpoint`	MUI `Breakpoint`	`'xl'`	Breakpoint at which mobile drawer icon appears

LayoutFooterOptions

Key	Type	Default	Description
`hide`	`boolean`	`false`	Removes the footer
`spreadOut`	`boolean`	—	Extends footer to full viewport width

useJumboLayout hook

Read and update layout options at runtime from any child component:

typescript

import { useJumboLayout } from '@jumbo/components/JumboLayout';
 
export function SidebarToggleButton() {
  const { sidebarOptions, setSidebarOptions } = useJumboLayout();
 
  const toggleMini = () => {
    setSidebarOptions({
      ...sidebarOptions,
      view: sidebarOptions.view === 'mini'
        ? SIDEBAR_VIEWS.FULL
        : SIDEBAR_VIEWS.MINI,
    });
  };
 
  return <IconButton onClick={toggleMini} />;
}

Context values

Value	Type	Description
`layoutOptions`	`LayoutOptions`	Full current layout options
`sidebarOptions`	`LayoutSidebarOptions`	Sidebar section of current options
`headerOptions`	`LayoutHeaderOptions`	Header section
`footerOptions`	`LayoutFooterOptions`	Footer section
`contentOptions`	`LayoutContentOptions`	Content section
`setSidebarOptions`	`(opts) => void`	Update sidebar options
`setHeaderOptions`	`(opts) => void`	Update header options
`setFooterOptions`	`(opts) => void`	Update footer options
`setOptions`	`(opts) => void`	Replace the entire layout config

Per-page layout overrides

Call setSidebarOptions({ hide: true }) inside a useEffect on a page that should render without a sidebar, and restore it on unmount. This lets individual pages override the global layout config without changing the default.