Change Layout

Change Layout

You can change default layouts by following these easy steps.

Let's assume we want to turn the minimal layout into default layout.

Step 1

Go to /src/app directory and change minimal directory name minimal to (minimal).

And (modern) directory to modern.

Step 2

Now go to src/components/setting/setting-drawer.tsx file.

Inside the LayoutSwitcher function change all the LAYOUT_OPTIONS.MODERN to LAYOUT_OPTIONS.MINIMAL.

Step 3

Go to src/lib/hooks/useLayout.ts file and change all the LAYOUT_OPTIONS.MODERN to LAYOUT_OPTIONS.MINIMAL

Step 4

Go to src/lib/constants/index.ts file and change the order LAYOUT_OPTIONS enum to the following.

export enum LAYOUT_OPTIONS {
  MINIMAL = 'minimal',
  MODERN = 'modern',
  RETRO = 'retro',
  CLASSIC = 'classic',
}

You will notice in the setting drawer the order of minimal layout is now changed as default.

Step 5

Change the Sidebar links.

The sidebar data and components all are in src/layouts/sidebar directory.

• On file _default.tsx change the parameter value of Sidebar function.

layoutOption = "";

to

(layoutOption = "/modern")

• On file _default.tsx change the below line.

  href: layoutOption + (layoutOption === `/${LAYOUT_OPTIONS.RETRO}` && item.href === '/' ? '' : item.href),

to

  href: layoutOption + (item.href === '/' ? '' : item.href),

• On file _layout-menu.tsx change this function.

const minimalMenuItems = defaultMenuItems.map((item) => ({
  name: item.name,
  icon: item.icon,
  href: "/" + LAYOUT_OPTIONS.MINIMAL + (item.href === "/" ? "" : item.href),
  ...(item.dropdownItems && {
    dropdownItems: item?.dropdownItems?.map((dropdownItem: any) => ({
      name: dropdownItem.name,
      ...(dropdownItem?.icon && { icon: dropdownItem.icon }),
      href: "/" + LAYOUT_OPTIONS.MINIMAL + dropdownItem.href,
    })),
  }),
}));

to

const minimalMenuItems = defaultMenuItems.map((item) => ({
  name: item.name,
  icon: item.icon,
  href: item.href,
  ...(item.dropdownItems && {
    dropdownItems: item?.dropdownItems?.map((dropdownItem: any) => ({
      name: dropdownItem.name,
      ...(dropdownItem?.icon && { icon: dropdownItem.icon }),
      href: dropdownItem.href,
    })),
  }),
}));

• On file _layout-menu.tsx change the parameter value of DrawerMenu function.

layoutOption = `/${LAYOUT_OPTIONS.MINIMAL}`,

to

layoutOption = '',

• On file _layout-menu.tsx change this function inside DrawerMenu function.

const drawerMenuItems = menuItems.map((item) => ({
  name: item.name,
  icon: item.icon,
  href: layoutOption + (item.href === "/" ? "" : item.href),
  ...(item.dropdownItems && {
    dropdownItems: item?.dropdownItems?.map((dropdownItem: any) => ({
      name: dropdownItem.name,
      ...(dropdownItem?.icon && { icon: dropdownItem.icon }),
      href: layoutOption + dropdownItem.href,
    })),
  }),
}));

to

const drawerMenuItems = menuItems.map((item) => ({
  name: item.name,
  icon: item.icon,
  href:
    layoutOption +
    (layoutOption === `/${LAYOUT_OPTIONS.CLASSIC}` && item.href === "/"
      ? ""
      : item.href),
  ...(item.dropdownItems && {
    dropdownItems: item?.dropdownItems?.map((dropdownItem: any) => ({
      name: dropdownItem.name,
      ...(dropdownItem?.icon && { icon: dropdownItem.icon }),
      href: layoutOption + dropdownItem.href,
    })),
  }),
}));

Step 6

Change All the other links for 'minimal'.

• Change this below code from the entire project.

layout === LAYOUT_OPTIONS.MODERN ? "" : layout;

to

layout === LAYOUT_OPTIONS.MINIMAL ? "" : layout;

• Change this code from the entire project.

(layout === LAYOUT_OPTIONS.MODERN ? "" : `/${layout}`) + routes.notification;

to

(layout === LAYOUT_OPTIONS.MINIMAL ? "" : `/${layout}`) + routes.notification;

• Change this code from the entire project.

layout === LAYOUT_OPTIONS.MODERN ? '/' : routes.home + layout,

to

layout === LAYOUT_OPTIONS.MINIMAL ? '/' : routes.home + layout,

• Change this code from the entire project.

layout === LAYOUT_OPTIONS.MODERN ? '' : routes.home + layout,

to

layout === LAYOUT_OPTIONS.MINIMAL ? '' : routes.home + layout,

• Change this code from the entire project.

const newPath =
  layout === LAYOUT_OPTIONS.MODERN
    ? routes.profile
    : `/${layout}${routes.profile}`;

to

const newPath =
  layout === LAYOUT_OPTIONS.MINIMAL
    ? routes.profile
    : `/${layout}${routes.profile}`;

Your are all set to use MINIMAL layout as your default layout.

N.B:

If you want to change any of the layout to default follow the same process.