Layouts
We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to "body" ! Please refer the below details.
If you want to change layout type for the all pages you have to set value in onClick settings
onClick={() => {handleLayout("ltr")}}>
const handleLayout = (layout: string) => {
if (layout === "rtl") {
document.body.classList.add("rtl");
document.body.classList.remove("ltr");
document.body.classList.remove("box-layout");
document.documentElement.dir = "rtl";
} else if (layout === "ltr") {
document.body.classList.add("ltr");
document.body.classList.remove("rtl");
document.body.classList.remove("box-layout");
document.documentElement.dir = "ltr";
} else if (layout === "box-layout") {
document.body.classList.remove("ltr");
document.body.classList.remove("rtl");
document.body.classList.add("box-layout");
document.body.classList.remove("offcanvas");
document.documentElement.dir = "ltr";
}
};
find LayoutType folder and change above value
rtl
How to use other layouts?
Add particular class for each layout in above js and it's changed all pages
Below class needs to be added with page-wrapper class when you want to add particular layout
Horizontal Sidebar
class ="page-wrapper compact-sidebar compact-small material-icon"
Vertical Sidebar
class ="page-wrapper compact-sidebar compact-small"