Buy nowGet update

Layout

Latestv5
Core layout

Update layout size settings in:

src/layouts/core/css-vars.ts

src/layouts/core/css-vars.ts
export function layoutSectionVars(theme: Theme) {
  return {
    '--layout-nav-zIndex': theme.zIndex.drawer + 1,
    '--layout-nav-mobile-width': '288px',
    '--layout-header-blur': '8px',
    '--layout-header-zIndex': theme.zIndex.appBar + 1,
    '--layout-header-mobile-height': '64px',
    '--layout-header-desktop-height': '72px',
  };
}
Dashboard layout

Update layout size settings in:

src/layouts/dashboard/css-vars.ts

src/layouts/dashboard/css-vars.ts
export function dashboardLayoutVars(theme: Theme) {
  return {
    '--layout-transition-easing': 'linear',
    '--layout-transition-duration': '120ms',
    '--layout-nav-mini-width': '88px',
    '--layout-nav-vertical-width': '300px',
    '--layout-nav-horizontal-height': '64px',
    '--layout-dashboard-content-pt': theme.spacing(1),
    '--layout-dashboard-content-pb': theme.spacing(8),
    '--layout-dashboard-content-px': theme.spacing(5),
  };
}
Change navigation items

To adjust navigation items, update the relevant nav-config.(ts|js) files:

  • <MainLayout /> → src/layouts/config-nav-main
  • <DashboardLayout /> → src/layouts/config-nav-dashboard
🔗 Reference: