Layouts

A layout is the shared frame around a page's content, such as navigation, a header and a footer. Editing that frame changes every page that uses it. Content that belongs to one screen stays in that page's page.tsx and its components.

The template uses an app frame for pages under (protected-pages) and an auth frame for screens under (auth-pages). These are Next.js route groups: their folder names organize the pages and do not appear in the URL.

Shared app frame

Edit src/components/layouts/post-login-layout.tsx to change the navigation, header or page footer shared by your app's pages. This file assembles the frame from layout components under src/components/layouts/.

The layout's children represents the current page. Keep it in the content area when rearranging the surrounding UI. Add an element here when it should appear across the app; add it inside a page when it belongs only to that screen.

When changing navigation or header controls, account for both the desktop and mobile versions. Menu links are configured separately in Navigation menu; name and logo changes are covered in App settings.

Page spacing, width and footer

Use the page's route entry in src/configs/routes.config.ts to change its outer content area. The meta.pageContainerType setting chooses the container:

Value	When to use it
`default`	Standard padding around content, using the available content width.
`contained`	Padded content centered within a responsive maximum width.
`gutterless`	Content that should manage its own spacing, without the page container's padding.

For example, add or update this meta object in the page's existing route entry to center its content and hide its page footer:

src/configs/routes.config.ts

meta: {
  pageContainerType: 'contained',
  footer: false,
},

Set only the options you want to change. Keep the route's other settings, entries and // nateui:... comments. See Create your own page if you still need to register the route.

These options affect the page's content area and page footer; the shared navigation and header remain. Use page.tsx and its components for spacing between elements within the page.

Auth screens

Edit src/components/layouts/auth-layout.tsx to change the frame shared by sign-in, sign-up and forgot-password screens, including its background, side content and form placement.

Here, children is the current auth screen. Keep it where that screen should appear while changing the surrounding layout. Screen-specific fields and messages belong in the individual screen's components.

Layout groups choose the frame. Authentication and access checks are configured separately, as described in Auth.