# Page Structure

{% tabs %}
{% tab title="Nodejs" %}

````html

<%- include '../layouts/main' %>
  <!-- [Head] start -->

  <head>
    <%- include '../layouts/head-page-meta' %>
    <!-- map-vector css -->
    <link rel="stylesheet" href= "assets/css/plugins/jsvectormap.min.css" %}>
    <%- include('../layouts/head-css') %>
  </head>
  <!-- [Head] end -->
  <!-- [Body] Start -->

  <body <%= bodysetup %> >
     <%- include('../layouts/layout-vertical') %>

    <!-- [ Main Content ] start -->
    <div class="pc-container">
      <div class="pc-content">
        <%- include('../layouts/breadcrumb') %> 
        <!-- [ Main Content ] start -->
        <div class="row">
          <div class="col-md-6 col-xl-8">
            <div class="card table-card">
              <div class="card-header d-flex align-items-center justify-content-between">
                <h5>Recent Users</h5>
                <div class="dropdown">
                  <a
                    class="avtar avtar-xs btn-link-secondary dropdown-toggle arrow-none"
                    href="#"
                    data-bs-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    ><i class="material-icons-two-tone f-18">more_vert</i></a
                  >
                  <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="#">View</a>
                    <a class="dropdown-item" href="#">Edit</a>
                  </div>
                </div>
              </div>
              <div class="card-body py-2 px-0">
                <div class="table-responsive">
                  <table class="table table-hover table-borderless table-sm mb-0">
                    <tbody>
                      <tr>
                        <td>
                          <div class="d-inline-block align-middle">
                            <img src="assets/images/user/avatar-1.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
                            <div class="d-inline-block">
                              <h6 class="m-b-0">Quinn Flynn</h6>
                              <p class="m-b-0">Android developer</p>
                            </div>
                          </div>
                        </td>
                        <td><p class="mb-0"><i class="ph-duotone ph-circle text-warning f-12"></i> 11 may 12:30</p></td>
                        <td class="text-end">
                          <button class="btn btn-sm btn-link-danger">Reject</button>
                          <button class="btn btn-sm btn-primary">Approve</button>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="d-inline-block align-middle">
                            <img src="assets/images/user/avatar-2.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
                            <div class="d-inline-block">
                              <h6 class="m-b-0">Garrett Winters</h6>
                              <p class="m-b-0">Android developer</p>
                            </div>
                          </div>
                        </td>
                        <td><p class="mb-0"><i class="ph-duotone ph-circle text-success f-12"></i> 11 may 12:30</p></td>
                        <td class="text-end">
                          <button class="btn btn-sm btn-link-danger">Reject</button>
                          <button class="btn btn-sm btn-primary">Approve</button>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="d-inline-block align-middle">
                            <img src="assets/images/user/avatar-3.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
                            <div class="d-inline-block">
                              <h6 class="m-b-0">Ashton Cox</h6>
                              <p class="m-b-0">Android developer</p>
                            </div>
                          </div>
                        </td>
                        <td><p class="mb-0"><i class="ph-duotone ph-circle text-primary f-12"></i> 11 may 12:30</p></td>
                        <td class="text-end">
                          <button class="btn btn-sm btn-link-danger">Reject</button>
                          <button class="btn btn-sm btn-primary">Approve</button>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div class="d-inline-block align-middle">
                            <img src= "assets/images/user/avatar-4.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
                            <div class="d-inline-block">
                              <h6 class="m-b-0">Cedric Kelly</h6>
                              <p class="m-b-0">Android developer</p>
                            </div>
                          </div>
                        </td>
                        <td><p class="mb-0"><i class="ph-duotone ph-circle text-danger f-12"></i> 11 may 12:30</p></td>
                        <td class="text-end">
                          <button class="btn btn-sm btn-link-danger">Reject</button>
                          <button class="btn btn-sm btn-primary">Approve</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- [ Main Content ] end -->
      </div>
    </div>
    <!-- [ Main Content ] end -->
    <%- include('../layouts/footer-block') %>
    <%- include('../layouts/customizer') %>
    <!-- [Page Specific JS] start -->
    <script src= "assets/js/plugins/apexcharts.min.js"></script>
    <script src= "assets/js/plugins/jsvectormap.min.js"></script>
    <script src= "assets/js/plugins/world.js" ></script>
    <script src= "assets/js/plugins/world-merc.js"></script>
    <script src= "assets/js/pages/dashboard-default.js"></script>
    <!-- [Page Specific JS] end -->
    <%- include('../layouts/footer-js') %}
  </body>
  <!-- [Body] end -->
</html>

```
````

{% endtab %}
{% endtabs %}

### Layout settings

You can change the default layout in the routers/routes.js file in the body tag

````j
```javascript
// =======================================================
// -----------   Light Able Theme Configuration  -----------
// =======================================================
const caption_show = 'true'; // [ false , true ]
const dark_navbar = 'false'; // [ false , true ]
const preset_theme = 'preset-1'; // [ preset-1 to preset-10 ]
const dark_layout = 'false'; // [ false , true , default ]
const rtl_layout = 'false'; // [ false , true ]
const box_container = 'false'; // [ false , true ]
const version = 'v1.1.0';

if (rtl_layout == "true") {
  var rtltemp = "rtl"
} else {
  var rtltemp = "ltr"
}

if (dark_layout == 'true') {
  var darklayouttemp = "dark"
} else {
  var darklayouttemp = "light"
}
if (dark_navbar == 'true') {
  var darknavbartemp = "dark"
} else {
  var darknavbartemp = "light"
}

const layout = {
  pc_caption_show: caption_show,
  pc_preset_theme: preset_theme,
  pc_dark_navbar: dark_navbar,
  pc_dark_layout: dark_layout,
  pc_rtl_layout: rtl_layout,
  pc_box_container: box_container,
  pc_theme_version: version,
  bodySetup: 'data-pc-preset="' + preset_theme + '" data-pc-sidebar-theme="' + darknavbartemp + '" data-pc-sidebar-caption="' + caption_show + '" data-pc-direction="' + rtltemp + '" data-pc-theme="' + darklayouttemp + '"',
};
```
````

| 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.                                                                        |
