Buy nowGet update
  • getting started
    • Introduction
    • Quick start
    • Deployment
    • Package & license
    • Setup
    • Figma
  • theme UI
    • Colors
    • Typography
    • IconsNEW
    • Shadows
    • Css vars
    • Logo
    • Layout
    • Navigation
    • Settings
  • Global
    • Styles
    • Components overrides
  • development
    • Routing
    • Main context
    • Environment variables
    • Structure
    • Clean project
    • Dependencies
    • Tailwind
    • Migrate to CRA
    • Credit assets
  • support
    • 🔵 Update
    • 🔴 Faqs & support
    • 🟣 Changelogv4.4.0
© All rights reserved.ContactHome

Layout

Latestv2

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',
  };
}
Change navigation items

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

  • <MainLayout /> → src/layouts/config-nav-main