Dashboard

This section provides guidance on laying out a dashboard page

What are we going to build?

We are going to build the dashboard layout, which consists of:

• header

• sidebar (or menu drawer) with toggle

• content area

• footer

Dashboard use mode Single Shared Layout.

Part 1 : Setup App layout

First, let's create an JSX carcass of the layout in ./src/pages/_app.js

// Vendors
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

// Next
import Head from 'next/head';

// Styles
import StyleGlobal from '@/globalStyle/index';

App.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

export default App;

Here we have the app container, which includes:

• the header

• the container with drawer and the main content area

• the footer

The main aspects of the CSS code are:

• minimum height of the app container equals window height (100 vh)

• the header and the footer have fixed height (50 px)

• the container takes all available window size (flex: 1) besides parts that were taken by the elements with the fixed height (the header and the footer)

• the drawer has a fixed width (240 px)

• the main (or content) area also takes all available space (flex: 1)