📄Page Structure

React

import './assets/scss/custom.scss'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom';
import App from './App.tsx'
import { Provider } from "react-redux";
import { configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './toolkit/index.ts';

// import './index.css'

const store = configureStore({ reducer: rootReducer, devTools: true });

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.Fragment>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.Fragment>,
)
```

Layout settings

```typescript
// data-pc-theme
export enum THEME_MODE {
    LIGHT = "light",
    DARK = "dark",
    DEFAULT = "default",
}

//data-pc-layout
export enum LAYOUT_THEME {
    VERTICAL = "vertical",
    HORIZONTAL = "horizontal",
    VERTICAL_TAB = "vertical-tab",
    MODULER = "moduler",
}

// data-pc-sidebar-theme
export enum SIDEBAR_THEME {
    LIGHT = "light",
    DARK = "dark"
}

// data-pc-sidebar-caption
export enum SIDEBAR_THEME_CAPTION {
    CAPTION_SHOW = "true",
    CAPTION_HIDE = "false"
}

// data-pc-preset
export enum THEME_PRESET {
    PRESET_1 = "preset-1",
    PRESET_2 = "preset-2",
    PRESET_3 = "preset-3",
    PRESET_4 = "preset-4",
    PRESET_5 = "preset-5",
    PRESET_6 = "preset-6",
    PRESET_7 = "preset-7",
    PRESET_8 = "preset-8",
    PRESET_9 = "preset-9",
    PRESET_10 = "preset-10",
}

export enum THEME_LAYOUT {
    LTR = "ltr",
    RTL = "rtl",
} 

```

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.