Layouts

Here in mern framework, 2 layouts are setup, one for dashboard and crud pages and another for outer pages like signup ,login,forgetpassword

The layout pages are setup in src/layout -- 2 layouts are defined here inner and outer

Getting Started

Header ,Footer , sidemenu components are present in components section we can change header or footer , sidemenu for whole app.

import { React, lazy } from 'react';
import { Outlet } from 'react-router-dom';

const Header = lazy(() => import('../components/Header/Header'));
const Footer = lazy(() => import('../components/Footer/DashFooter'));
const Menu = lazy(() => import('../components/LeftMenu/DashMenu'));
export default function Innerlayout() {
  return (
      <Header />
      <Menu />
        <Outlet />{' '}
        <Footer />
  );
}

Adding a new page

First create a folder in the pages folder like given below

example: Employees

pages/
├── employees/
│   └── create.js
│   └── create.module.scss

After creating pages set routing in the router/index.js If it is to be accessed only after login, add routes inside the innerlayout as protected route otherwise add inside the outer layout as unprotected route

<Route
exact
path="/employee/create"
element={
<Suspense
fallback={
<div><SpinnerDotted style={{ marginTop: '250px', marginLeft: '300px' }} />
</div>
}
>
<ProtectedRoute>
{' '}
<EmployeeCreate />
</ProtectedRoute>
</Suspense>
}
/>

Roles

In Superadmin login roles page in the dashboard listed the roles .and we can create new roles and we can edit roles and for every roles profile nd settings page have Permissions. other permissions we can change accordingly.