Vite Folder Structure
Overview
We have used yarn start to compile the react app files.
main.jsx file :
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import * as serviceWorker from "./serviceWorker"
import { BrowserRouter } from "react-router-dom";
import "./i18n"
import { Provider } from "react-redux";
import store from "./store";
ReactDOM.createRoot(document.getElementById('root')).render(
<React.Fragment>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</React.Fragment>
);
serviceWorker.unregister()
Layout setup
You can set the default layout in the src/store/layout/reducer.js
file.
const INIT_STATE = {
layoutType: layoutTypes.VERTICAL,
layoutModeType: layoutModeTypes.LIGHT,
layoutWidth: layoutWidthTypes.FLUID,
leftSideBarTheme: leftSideBarThemeTypes.DARK,
leftSideBarThemeImage: leftBarThemeImageTypes.NONE,
leftSideBarType: leftSidebarTypes.DEFAULT,
topbarTheme: topBarThemeTypes.LIGHT,
isPreloader: false,
showRightSidebar: false,
isMobile: false,
showSidebar: true,
leftMenu: false,
};
layoutType: layoutTypes.VERTICAL, | To set vertical layout width. |
---|---|
layoutType: layoutTypes.HORIZONTAL, | To set horizontal layout width. |
layoutModeType: layoutModeTypes.LIGHT, | To set Light layout mode. |
layoutModeType: layoutModeTypes.DARK, | To set Dark layout mode. |
layoutWidth: layoutWidthTypes.FLUID, | To set fluid layout width. |
layoutWidth: layoutWidthTypes.BOXED, | To set boxed layout width. |
layoutWidth: layoutWidthTypes.SCROLLABLE, | To set scrollable layout width. |
leftSideBarTheme: leftSideBarThemeTypes.LIGHT, | To set light sidebar type. |
leftSideBarTheme: leftSideBarThemeTypes.COLORED, | To set colored sidebar type. |
leftSideBarTheme: leftSideBarThemeTypes.DARK, | To set dark sidebar type. |
leftSideBarTheme: leftSideBarThemeTypes.WINTER, | To set winter sidebar type. |
leftSideBarTheme: leftSideBarThemeTypes.LADYLIP, | To set ladtlip sidebar type. |
leftSideBarTheme: leftSideBarThemeTypes.PLUMPLATE, | To set plumplate sidebar type. |
leftSideBarTheme: leftSideBarThemeTypes.STRONGBLISS, | To set strongbliss sidebar type. |
leftSideBarTheme: leftSideBarThemeTypes.GREATWHALE, | To set greatwhale sidebar type. |
leftSideBarThemeImage: leftBarThemeImageTypes.NONE, | To set none sidebar image type. |
leftSideBarThemeImage: leftBarThemeImageTypes.IMG1, | To set image1 sidebar image type. |
leftSideBarThemeImage: leftBarThemeImageTypes.IMG2, | To set image2 sidebar image type. |
leftSideBarThemeImage: leftBarThemeImageTypes.IMG3, | To set image3 sidebar image type. |
leftSideBarThemeImage: leftBarThemeImageTypes.IMG4, | To set image4 sidebar image type. |
leftSideBarType: leftSidebarTypes.DEFAULT, | To set deafult sidebar type. |
leftSideBarType: leftSidebarTypes.COMPACT, | To set compact sidebar type. |
leftSideBarType: leftSidebarTypes.ICON, | To set icon sidebar type. |
topbarTheme: topBarThemeTypes.LIGHT, | To set the Light color of Topbar. |
topbarTheme: topBarThemeTypes.DARK, | To set the dark color of Topbar. |
topbarTheme: topBarThemeTypes.COLORED, | To set the colored color of Topbar. |
isPreloader: false, | set false the preloader on the Page. |
showRightSidebar: false, | set false the showRightSidebar on the Page. |
isMobile: false, | set false the isMobile on the Page. |
showSidebar: true, | set false the showSidebar on the Page. |
leftMenu: false, | set false the leftMenu on the Page. |