Layouts

Jumbo React Next ships with six layout variants organized as Next.js route groups. Each variant has its own layout.tsx, theme config, and layout options. Pages are automatically assigned to a layout based on which route group they live in.

Layout variants

Common layout (default)

The (common) route group uses the full application shell with a persistent sidebar, fixed header, and footer:

// src/app/[lang]/(common)/layout.tsx (simplified)
'use client';
 
import { JumboLayout, 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';
import { CustomizerButton } from '@/components/CustomizerButton/CustomizerButton';
import { CustomizerSettings } from '@/components/CustomizerSettings/CustomizerSettings';
 
export default function CommonLayout({ children }) {
  return (
    <JumboLayoutProvider defaultLayoutConfig={defaultLayoutConfig}>
      <JumboLayout header={<Header />} sidebar={<SidebarWithMenus />} footer={<Footer />}>
        {children}
        <CustomizerButton />
        <CustomizerSettings />
      </JumboLayout>
    </JumboLayoutProvider>
  );
}

Demo layouts (Demo1–Demo4)

Each demo layout wraps JumboTheme with a demo-specific config and overrides the header component and menu data. All four mirror the same page tree as (common) under their /demo-1/, /demo-2/, /demo-3/, /demo-4/ URL prefixes.

Demo layout file pattern

// src/app/[lang]/(demo4-layout)/layout.tsx (excerpt)
import { JumboTheme } from '@jumbo/components/JumboTheme';
import { JumboLayoutProvider } from '@jumbo/components/JumboLayout';
import { CONFIG4 } from '@/components/Demo4Layout/themes';
import { demoConfig4 } from '@/components/Demo4Layout/config';
import { Header4 } from '@/components/Demo4Layout/Header4/Header4';
import { HeroSection } from '@/components/Demo4Layout/HeroSection/HeroSection';
 
export default function Demo4Layout({ children }) {
  return (
    <JumboTheme init={CONFIG4.THEME}>
      <JumboLayoutProvider defaultLayoutConfig={demoConfig4}>
        <JumboLayout header={<Header4 />} sidebar={<SidebarWithMenus menus={demo4Menus} />}>
          <HeroSection />
          {children}
        </JumboLayout>
      </JumboLayoutProvider>
    </JumboTheme>
  );
}

Solo layout

The (solo) group renders children without any application chrome. It is used for auth pages, error pages, and the lock screen:

// src/app/[lang]/(solo)/layout.tsx
export default function SoloLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

Sub-layouts

Settings layout

User settings pages have an inner layout with a secondary sidebar menu:

/[lang]/user/settings/public-profile
/[lang]/user/settings/team
/[lang]/user/settings/notifications
...

The settings layout (src/app/[lang]/(common)/user/settings/layout.tsx) renders SettingLayoutContent with links from src/services/setting-menu-services.ts.

App shells

Mail, Chat, and Contact use app-specific layouts that render their own sidebar panel alongside the page content:

These app shells are rendered inside the parent (common) or (demo*) layout, so the outer sidebar and header remain visible.

Demo-specific menu data

Each demo layout sources its navigation from a different constants file:

Creating a custom layout

To add a new layout variant:

1. Create a new route group

   Add a folder under src/app/[lang]/ with parentheses:

   bash

   mkdir -p src/app/\[lang\]/\(my-layout\)

2. Create the layout.tsx

   Add a layout.tsx that wraps JumboLayoutProvider and JumboLayout with your config:

   tsx

   // src/app/[lang]/(my-layout)/layout.tsx
   'use client';
    
   import { JumboLayout, JumboLayoutProvider } from '@jumbo/components/JumboLayout';
   import { myLayoutConfig } from '@/components/MyLayout/config';
   import { MyHeader } from '@/components/MyLayout/MyHeader';
    
   export default function MyLayout({ children }) {
     return (
       <JumboLayoutProvider defaultLayoutConfig={myLayoutConfig}>
         <JumboLayout header={<MyHeader />}>
           {children}
         </JumboLayout>
       </JumboLayoutProvider>
     );
   }

3. Add pages

   Create page.tsx files inside the new route group. They will automatically use the new layout.