Guide
Layout

Admin Template Layout System

Welcome to the documentation for the layout system in the AMRO Next.js 14 Admin Template. This guide will provide you with a comprehensive overview of how the layout system works and how you can customize it to suit your needs.

Overview

The layout system in the AMRO admin template is designed to provide a flexible and responsive foundation for building admin interfaces. It is built on top of the core layout system provided by Next.js 14, leveraging its powerful features for server-side rendering and dynamic routing. To learn more about the layout system in the next Click Here (opens in a new tab)

Horizontal Layout

The Horizontal layout in the AMRO admin template is designed for public pages where content is displayed horizontally, typically suited for landing pages, login, and registration screens. Here's an overview of its structure:

  1. Header: The header section spans horizontally across the top of the page and contains branding elements, navigation links, and user authentication options.

  2. Main Content Area: The main content area occupies the majority of the page width and displays the primary content such as hero sections, feature descriptions, and call-to-action buttons.

  3. Footer: The footer section extends horizontally across the bottom of the page and typically contains copyright information, links to legal pages, and social media icons.

Example Usage

Here's an example of how you can implement the Horizontal layout in your Next.js pages:

import HorizontalLayout from "layout/HorizontalLayout";
 
export default function LandingPage() {
  return (
    <HorizontalLayout>
      {/* Header */}
      <header>{/* Header content goes here */}</header>
 
      {/* Main content area */}
      <main>{/* Main content goes here */}</main>
 
      {/* Footer */}
      <footer>{/* Footer content goes here */}</footer>
    </HorizontalLayout>
  );
}

Vertical Layout

The Vertical layout in the AMRO admin template is tailored for dashboard pages where content is displayed vertically, typically suited for admin panels, data tables, and analytics dashboards. Here's an overview of its structure:

  1. Sidebar: The sidebar section is positioned vertically along the left side of the page and contains navigation links to different sections of the dashboard.

  2. Header: The header section spans horizontally across the top of the page and contains branding elements, user profile information, and navigation controls.

  3. Main Content Area: The main content area occupies the remaining space and displays the primary content of the dashboard, such as data tables, charts, and forms.

  4. Footer: The footer section extends horizontally across the bottom of the page and typically contains copyright information, links to documentation, and other relevant resources.

Example Usage

Here's an example of how you can implement the Vertical layout in your Next.js pages:

import VerticalLayout from "layout/VerticalLayout";
 
export default function DashboardPage() {
  return (
    <VerticalLayout>
      {/* Sidebar */}
      <aside>{/* Sidebar content goes here */}</aside>
 
      <div className="flex flex-col w-full">
        {/* Header */}
        <header>{/* Header content goes here */}</header>
 
        {/* Main content area */}
        <main>{/* Main content goes here */}</main>
 
        {/* Footer */}
        <footer>{/* Footer content goes here */}</footer>
      </div>
    </VerticalLayout>
  );
}

Customization Options

The AMRO admin template provides several customization options for tailoring the layout to your specific requirements:

  1. Theme Customization: You can customize the color scheme and styling of the layout to match your brand identity. Simply modify the theme configuration files to apply your desired colors and styles.

  2. Component Customization: Each layout component, such as the header, sidebar, and footer, can be customized to add or remove elements according to your preferences. You can also create custom components and integrate them into the layout as needed.

  3. Responsive Design: The layout is designed to be fully responsive, ensuring optimal viewing and interaction experiences across various devices and screen sizes. You can fine-tune the responsiveness of individual components to accommodate different viewport dimensions.

Getting Started

To get started with the layout system in the AMRO admin template, follow these steps:

  1. Clone the AMRO repository from GitHub or use the provided template link.

  2. Install the necessary dependencies by running npm install or yarn install.

  3. Explore the layout components located in the layout directory. Modify these components to customize the layout according to your requirements.

  4. Test the layout on different devices and screen sizes to ensure responsiveness and compatibility.

Conclusion

The layout system in the AMRO admin template offers a robust foundation for building modern and responsive admin interfaces with Next.js 14. By leveraging its flexible customization options, you can create tailored admin dashboards that meet the unique needs of your project.

For more information and examples, visit the AMRO Admin Template Site (opens in a new tab) and explore the documentation.

ThemingVSCode Configurations