📄Page Structure

import "@assets/scss/custom.scss";
import React, { ReactElement, ReactNode } from "react";
import Head from "next/head";
import { Provider } from "react-redux";
import { wrapper } from "../toolkit/index";

import { AppProps } from "next/app";
import type { NextPage } from "next";

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};
const MyApp: any = ({ Component, pageProps, ...rest }: AppPropsWithLayout) => {
  const { store } = wrapper.useWrappedStore(rest);
  const getLayout = Component.getLayout || ((page) => page);
  
return (
    <>
      <Head>
        <link rel='icon' href='/favicon.svg' />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {/* <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"></link> */}
        <title>LightAble | Next js & Admin Dashboard </title>
      </Head>
      <Provider store={store}>
        {getLayout(<Component {...pageProps} />)}
      </Provider>
    </>
  );
};

export default MyApp;

Layout settings

Attribute
Description

data-pc-preset= "preset-1"

To set the your primary theme color you can change ['preset-1' to 'preset-10'] for different color.

data-pc-sidebar-theme = "light"

To set the Light color left Sidebar.

data-pc-sidebar-theme = "dark"

To set the Light color dark Sidebar.

data-pc-sidebar-caption = "true"

To set the caption on.

data-pc-sidebar-caption = "false"

To set the caption off.

data-pc-direction = "ltr"

To set the layout direction left to right.

data-pc-direction = "rtl"

To set the layout direction right to left.

data-pc-theme = "light"

To set the layout theme light.

data-pc-theme = "dark"

To set the layout theme dark.

PreviousNext.js ComponentsNextCredits

Last updated