pushmenu doc added

Update index.html
astro
2025-08-16 12:17:42 +05:30 · 2025-08-16 12:15:08 +05:30 · 2025-08-16 12:15:04 +05:30 · 2025-08-15 14:41:26 +05:30 · 2025-08-04 14:58:53 +05:30 · 2025-07-24 21:50:23 +03:00
83 changed files with 2388 additions and 477 deletions
--- a/README.md
+++ b/README.md
@@ -9,23 +9,27 @@
 **AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 5](https://getbootstrap.com/)** framework and also the JavaScript plugins.
 Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.

-## What's New in v4.0.0-rc3
+## What's New in v4.0.0-rc4

-**Production Deployment & Cross-Platform Compatibility** - This release resolves critical production deployment issues:
+**Latest Release with Enhanced Performance & Updated Dependencies** - Fresh improvements for better development experience:

- **Fixed Production Builds** - Resolved CSS/JS path issues, sidebar navigation, and image loading in all deployment scenarios
- **Smart Path Resolution** - Automatic relative path calculation works for root deployment, sub-folders, and CDN hosting  
- **RTL CSS Fix** - Eliminated rtlcss interference with standard LTR production builds
- **Updated Dependencies** - Bootstrap 5.3.7, Bootstrap Icons 1.13.1, OverlayScrollbars 2.11.0
- **Zero Console Errors** - Fixed all CDN integrity mismatches and runtime issues
- **FTP/Static Host Ready** - Perfect compatibility with traditional hosting and modern static platforms
+- **Updated Dependencies** - 8 npm packages updated to latest versions for improved security and performance
+- **Refined Mobile Image Loading** - Streamlined path resolution by removing JavaScript runtime fixes
+- **Better Performance** - Images now load faster with build-time path generation instead of runtime corrections
+- **Latest Tooling** - Updated TypeScript, ESLint, Prettier, Astro, and build tools
+- **Zero Runtime Errors** - Eliminated console errors from JavaScript path corrections

 **Key Improvements:**
- ✅ Development and production environments now behave identically
- ✅ Images, CSS, and JavaScript load correctly in any deployment structure  
- ✅ Sidebar navigation displays properly with badges and arrow indicators
- ✅ All CDN resources load without console errors
- ✅ Complete production build included in repository for easy deployment
+- ✅ All images use relative paths generated at build time
+- ✅ No more JavaScript runtime path fixes causing console errors
+- ✅ Faster image loading with optimal path resolution
+- ✅ Latest development tools and security updates
+- ✅ Production-ready with enhanced stability
+
+**Install the latest:**
+```bash
+npm install admin-lte@4.0.0-rc4
+```

 See the [CHANGELOG.md](CHANGELOG.md) for complete details.

@@ -69,7 +73,7 @@ To build for production:

 AdminLTE supports all modern browsers with the latest Bootstrap 5.3.7:
 - Chrome (latest)
- Firefox (latest) 
+- Firefox (latest)
 - Safari (latest)
 - Edge (latest)

@@ -82,6 +86,36 @@ AdminLTE v4 build scripts work cross-platform:

 All npm scripts use cross-platform utilities to ensure consistent behavior across different operating systems.

+## Sponsorship
+
+Support AdminLTE development by becoming a sponsor or donor.
+
+<p align="center">
+  <a href="https://github.com/sponsors/danny007in">
+    <img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="Sponsor on GitHub" />
+  </a>
+  &nbsp;&nbsp;
+  <a href="https://www.paypal.me/daniel007in">
+    <img src="https://img.shields.io/static/v1?label=Donate&message=%E2%9D%A4&logo=PayPal&color=%2300457C" alt="Donate via PayPal" />
+  </a>
+</p>
+
+## Our Sponsors
+
+<p align="center">
+  <a href="https://github.com/spizzo14"><img src="https://unavatar.io/github/spizzo14?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: spizzo14" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/tomhappyblock"><img src="https://unavatar.io/github/tomhappyblock?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: tomhappyblock" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/stefanmorderca"><img src="https://unavatar.io/github/stefanmorderca?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: stefanmorderca" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/tito10047"><img src="https://unavatar.io/github/tito10047?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: tito10047" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/sitchi"><img src="https://unavatar.io/github/sitchi?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: sitchi" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/npreee"><img src="https://unavatar.io/github/npreee?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: npreee" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/isaacmorais"><img src="https://unavatar.io/github/isaacmorais?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: isaacmorais" loading="lazy" /></a>&nbsp;&nbsp;
+</p>
+
+<p align="center">
+  <a href="https://github.com/sponsors/danny007in">Your avatar here? Become a sponsor</a>
+</p>
+
 ## Contributing

 - Highly welcome.
@@ -95,11 +129,6 @@ All npm scripts use cross-platform utilities to ensure consistent behavior acros
 - After installation completes, run `npm start`
 - Cool, Send your changes in PR to `master` branch.

-## Sponsorship
-
-Support AdminLTE development by becoming a sponsor.
-[Github Sponsors](https://github.com/sponsors/danny007in) or
-[PayPal](https://www.paypal.me/daniel007in)

 ## License

@@ -113,3 +142,4 @@ AdminLTE.io reserves the right to change the license of future releases.
 - [Pickaface](https://pickaface.net/)
 - [Unsplash](https://unsplash.com/)
 - [Uifaces](http://uifaces.com/)
+- [Unavatar](https://unavatar.io/)
--- a/dist/UI/general.html
+++ b/dist/UI/general.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | General UI Elements</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | General UI Elements" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">General UI Elements</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">General UI Elements</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -775,7 +803,9 @@
                <!--begin::Accordion-->
                <div class="card card-primary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Accordion</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Accordion</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -877,7 +907,9 @@
                <!--begin::Alert-->
                <div class="card card-success card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Alert</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Alert</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -924,7 +956,9 @@
                <!--begin::Badge-->
                <div class="card card-warning card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Badge</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Badge</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -982,7 +1016,9 @@
                <!--begin::Button-->
                <div class="card card-danger card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Button</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Button</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1048,7 +1084,9 @@
                <!--begin::Button Group-->
                <div class="card card-info card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Button Group</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Button Group</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1079,8 +1117,10 @@
                    >
                      <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" />
                      <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
+
                      <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off" />
                      <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
+
                      <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off" />
                      <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
                    </div>
@@ -1098,6 +1138,7 @@
                        checked
                      />
                      <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
+
                      <input
                        type="radio"
                        class="btn-check"
@@ -1106,6 +1147,7 @@
                        autocomplete="off"
                      />
                      <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
+
                      <input
                        type="radio"
                        class="btn-check"
@@ -1133,8 +1175,12 @@
                          Dropdown
                        </button>
                        <ul class="dropdown-menu">
-                          <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-                          <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+                          <li>
+                            <a class="dropdown-item" href="#">Dropdown link</a>
+                          </li>
+                          <li>
+                            <a class="dropdown-item" href="#">Dropdown link</a>
+                          </li>
                        </ul>
                      </div>
                    </div>
@@ -1145,7 +1191,9 @@
                <!--begin::Collapse-->
                <div class="card card-primary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Collapse</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Collapse</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1184,7 +1232,9 @@
                <!--begin::Dropdowns-->
                <div class="card card-success card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Dropdowns</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Dropdowns</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1199,10 +1249,18 @@
                      </button>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
-                        <li><a class="dropdown-item" href="#">Another action</a></li>
-                        <li><a class="dropdown-item" href="#">Something else here</a></li>
-                        <li><hr class="dropdown-divider" /></li>
-                        <li><a class="dropdown-item" href="#">Separated link</a></li>
+                        <li>
+                          <a class="dropdown-item" href="#">Another action</a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </li>
+                        <li>
+                          <hr class="dropdown-divider" />
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Separated link</a>
+                        </li>
                      </ul>
                    </div>
                    <div class="btn-group">
@@ -1216,10 +1274,18 @@
                      </button>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
-                        <li><a class="dropdown-item" href="#">Another action</a></li>
-                        <li><a class="dropdown-item" href="#">Something else here</a></li>
-                        <li><hr class="dropdown-divider" /></li>
-                        <li><a class="dropdown-item" href="#">Separated link</a></li>
+                        <li>
+                          <a class="dropdown-item" href="#">Another action</a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </li>
+                        <li>
+                          <hr class="dropdown-divider" />
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Separated link</a>
+                        </li>
                      </ul>
                    </div>
                    <hr />
@@ -1235,10 +1301,18 @@
                      </button>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
-                        <li><a class="dropdown-item" href="#">Another action</a></li>
-                        <li><a class="dropdown-item" href="#">Something else here</a></li>
-                        <li><hr class="dropdown-divider" /></li>
-                        <li><a class="dropdown-item" href="#">Separated link</a></li>
+                        <li>
+                          <a class="dropdown-item" href="#">Another action</a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </li>
+                        <li>
+                          <hr class="dropdown-divider" />
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Separated link</a>
+                        </li>
                      </ul>
                    </div>
                    <div class="btn-group">
@@ -1253,10 +1327,18 @@
                      </button>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
-                        <li><a class="dropdown-item" href="#">Another action</a></li>
-                        <li><a class="dropdown-item" href="#">Something else here</a></li>
-                        <li><hr class="dropdown-divider" /></li>
-                        <li><a class="dropdown-item" href="#">Separated link</a></li>
+                        <li>
+                          <a class="dropdown-item" href="#">Another action</a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </li>
+                        <li>
+                          <hr class="dropdown-divider" />
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#">Separated link</a>
+                        </li>
                      </ul>
                    </div>
                  </div>
@@ -1266,7 +1348,9 @@
                <!--begin::List Group-->
                <div class="card card-warning card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">List Group</div></div>
+                  <div class="card-header">
+                    <div class="card-title">List Group</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1300,7 +1384,9 @@
                <!--begin::Navbar-->
                <div class="card card-danger card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Navbar</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Navbar</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1323,7 +1409,9 @@
                            <li class="nav-item">
                              <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
-                            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+                            <li class="nav-item">
+                              <a class="nav-link" href="#">Link</a>
+                            </li>
                            <li class="nav-item dropdown">
                              <a
                                class="nav-link dropdown-toggle"
@@ -1335,10 +1423,18 @@
                                Dropdown
                              </a>
                              <ul class="dropdown-menu">
-                                <li><a class="dropdown-item" href="#">Action</a></li>
-                                <li><a class="dropdown-item" href="#">Another action</a></li>
-                                <li><hr class="dropdown-divider" /></li>
-                                <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                <li>
+                                  <a class="dropdown-item" href="#">Action</a>
+                                </li>
+                                <li>
+                                  <a class="dropdown-item" href="#">Another action</a>
+                                </li>
+                                <li>
+                                  <hr class="dropdown-divider" />
+                                </li>
+                                <li>
+                                  <a class="dropdown-item" href="#">Something else here</a>
+                                </li>
                              </ul>
                            </li>
                            <li class="nav-item">
@@ -1364,17 +1460,29 @@
                <!--begin::Pagination-->
                <div class="card card-info card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Pagination</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Pagination</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
                    <nav aria-label="Page navigation example">
                      <ul class="pagination">
-                        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
-                        <li class="page-item"><a class="page-link" href="#">1</a></li>
-                        <li class="page-item"><a class="page-link" href="#">2</a></li>
-                        <li class="page-item"><a class="page-link" href="#">3</a></li>
-                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">Previous</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">1</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">2</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">3</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">Next</a>
+                        </li>
                      </ul>
                    </nav>
                    <hr />
@@ -1385,9 +1493,15 @@
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
-                        <li class="page-item"><a class="page-link" href="#">1</a></li>
-                        <li class="page-item"><a class="page-link" href="#">2</a></li>
-                        <li class="page-item"><a class="page-link" href="#">3</a></li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">1</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">2</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">3</a>
+                        </li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
@@ -1398,13 +1512,21 @@
                    <hr />
                    <nav aria-label="...">
                      <ul class="pagination">
-                        <li class="page-item disabled"><a class="page-link">Previous</a></li>
+                        <li class="page-item disabled">
+                          <a class="page-link">Previous</a>
+                        </li>
                        <li class="page-item active" aria-current="page">
                          <a class="page-link" href="#">1</a>
                        </li>
-                        <li class="page-item"><a class="page-link" href="#">2</a></li>
-                        <li class="page-item"><a class="page-link" href="#">3</a></li>
-                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">2</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">3</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">Next</a>
+                        </li>
                      </ul>
                    </nav>
                  </div>
@@ -1414,7 +1536,9 @@
                <!--begin::Placeholder-->
                <div class="card card-secondary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Placeholder</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Placeholder</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1439,7 +1563,9 @@
                <!--begin::Progress-->
                <div class="card card-primary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Progress</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Progress</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1512,7 +1638,9 @@
                <!--begin::Toast-->
                <div class="card card-primary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Toast</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Toast</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1599,7 +1727,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1618,7 +1747,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1637,7 +1767,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1656,7 +1787,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1675,7 +1807,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1694,7 +1827,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1713,7 +1847,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1732,7 +1867,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1751,7 +1887,8 @@
                      >
                        <div class="toast-header">
                          <i class="bi bi-circle me-2"></i>
-                          <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
+                          <strong class="me-auto">Bootstrap</strong>
+                          <small>11 mins ago</small>
                          <button
                            type="button"
                            class="btn-close"
@@ -1769,7 +1906,9 @@
                <!--begin::Tooltip-->
                <div class="card card-primary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Tooltip</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Tooltip</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1800,7 +1939,9 @@
                <!--begin::Spinner-->
                <div class="card card-success card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Spinner</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Spinner</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1886,7 +2027,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/UI/icons.html
+++ b/dist/UI/icons.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Icons</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Icons" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Icons</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Icons</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -759,7 +787,9 @@
                <!-- The icons -->
                <div class="col-12">
                  <div class="card card-primary card-outline">
-                    <div class="card-header"><h3 class="card-title">Icons</h3></div>
+                    <div class="card-header">
+                      <h3 class="card-title">Icons</h3>
+                    </div>
                    <div class="card-body">
                      <p>You can use any font library you like with AdminLTE 4.</p>
                      <strong>Recommendations</strong>
@@ -827,7 +857,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/UI/timeline.html
+++ b/dist/UI/timeline.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Timeline Elements</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Timeline Elements" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Timeline</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Timeline</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -759,16 +787,19 @@
                <!-- The time line -->
                <div class="timeline">
                  <!-- timeline time label -->
-                  <div class="time-label"><span class="text-bg-danger">10 Feb. 2023</span></div>
+                  <div class="time-label">
+                    <span class="text-bg-danger">10 Feb. 2023</span>
+                  </div>
                  <!-- /.timeline-label -->
                  <!-- timeline item -->
                  <div>
-                    <i class="timeline-icon bi bi-envelope text-bg-primary"></i>
+                    <i class="timeline-icon bi bi-envelope text-bg-primary"> </i>
                    <div class="timeline-item">
                      <span class="time"> <i class="bi bi-clock-fill"></i> 12:05 </span>
                      <h3 class="timeline-header">
                        <a href="#">Support Team</a> sent you an email
                      </h3>
+
                      <div class="timeline-body">
                        Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning
                        heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo
@@ -784,7 +815,7 @@
                  <!-- END timeline item -->
                  <!-- timeline item -->
                  <div>
-                    <i class="timeline-icon bi bi-person text-bg-success"></i>
+                    <i class="timeline-icon bi bi-person text-bg-success"> </i>
                    <div class="timeline-item">
                      <span class="time"> <i class="bi bi-clock-fill"></i> 5 mins ago </span>
                      <h3 class="timeline-header no-border">
@@ -795,7 +826,7 @@
                  <!-- END timeline item -->
                  <!-- timeline item -->
                  <div>
-                    <i class="timeline-icon bi bi-chat-text-fill text-bg-warning"></i>
+                    <i class="timeline-icon bi bi-chat-text-fill text-bg-warning"> </i>
                    <div class="timeline-item">
                      <span class="time"> <i class="bi bi-clock-fill"></i> 27 mins ago </span>
                      <h3 class="timeline-header">
@@ -812,11 +843,13 @@
                  </div>
                  <!-- END timeline item -->
                  <!-- timeline time label -->
-                  <div class="time-label"><span class="text-bg-success">3 Jan. 2023</span></div>
+                  <div class="time-label">
+                    <span class="text-bg-success">3 Jan. 2023</span>
+                  </div>
                  <!-- /.timeline-label -->
                  <!-- timeline item -->
                  <div>
-                    <i class="timeline-icon bi bi-camera text-bg-primary"></i>
+                    <i class="timeline-icon bi bi-camera text-bg-primary"> </i>
                    <div class="timeline-item">
                      <span class="time"> <i class="bi bi-clock-fill"></i> 2 days ago </span>
                      <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
@@ -832,9 +865,12 @@
                  <!-- timeline item -->
                  <div>
                    <i class="timeline-icon bi bi-camera-film text-bg-info"></i>
+
                    <div class="timeline-item">
                      <span class="time"> <i class="bi bi-clock-fill"></i> 5 days ago </span>
+
                      <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
+
                      <div class="timeline-body">
                        <div class="ratio ratio-16x9">
                          <iframe
@@ -849,7 +885,9 @@
                    </div>
                  </div>
                  <!-- END timeline item -->
-                  <div><i class="timeline-icon bi bi-clock-fill text-bg-secondary"></i></div>
+                  <div>
+                    <i class="timeline-icon bi bi-clock-fill text-bg-secondary"> </i>
+                  </div>
                </div>
              </div>
              <!-- /.col -->
@@ -905,7 +943,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/browser-support.html
+++ b/dist/docs/browser-support.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Browser Support | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="Browser Support | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Browser Support</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Browser Support</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -842,7 +870,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/color-mode.html
+++ b/dist/docs/color-mode.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Color Mode | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="Color Mode | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Color Mode Toggle</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Color Mode Toggle</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -804,7 +832,9 @@
                          data-bs-toggle="dropdown"
                          data-bs-display="static"
                        >
-                          <span class="theme-icon-active"> <i class="my-1"></i> </span>
+                          <span class="theme-icon-active">
+                            <i class="my-1"></i>
+                          </span>
                          <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
                        </button>
                        <ul
@@ -1058,6 +1088,7 @@
      <!--end::Footer-->
    </div>
    <!--end::App Wrapper-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <script
      src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -1085,7 +1116,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
@@ -1097,6 +1136,7 @@
      });
    </script>
    <!--end::OverlayScrollbars Configure-->
+
    <script>
      // Color Mode Toggler
      (() => {
--- a/dist/docs/components/main-header.html
+++ b/dist/docs/components/main-header.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Main Header Component | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="Main Header Component | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Main Header Component</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Main Header Component</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -769,6 +797,7 @@
                <b>does not</b> cover.
              </p>
            </div>
+
            <div class="callout callout-info mb-4">
              <h5 class="fw-bold">Tips!</h5>
              <p>
@@ -777,6 +806,7 @@
                scanning the HTML page.
              </p>
            </div>
+
            <!-- Navbar -->
            <nav class="navbar navbar-expand bg-body">
              <!--begin::Container-->
@@ -788,12 +818,15 @@
                      <i class="bi bi-list"></i>
                    </a>
                  </li>
-                  <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
+                  <li class="nav-item d-none d-md-block">
+                    <a href="#" class="nav-link">Home</a>
+                  </li>
                  <li class="nav-item d-none d-md-block">
                    <a href="#" class="nav-link">Contact</a>
                  </li>
                </ul>
                <!-- End navbar links -->
+
                <ul class="navbar-nav ms-auto">
                  <!-- Navbar Search -->
                  <li class="nav-item">
@@ -801,6 +834,7 @@
                      <i class="bi bi-search"></i>
                    </a>
                  </li>
+
                  <!-- Messages Dropdown Menu -->
                  <li class="nav-item dropdown">
                    <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -933,6 +967,7 @@
                          class="rounded-circle shadow"
                          alt="User Image"
                        />
+
                        <p>
                          Alexander Pierce - Web Developer
                          <small>Member since Nov. 2023</small>
@@ -942,9 +977,15 @@
                      <li class="user-body">
                        <!--begin::Row-->
                        <div class="row">
-                          <div class="col-4 text-center"><a href="#">Followers</a></div>
-                          <div class="col-4 text-center"><a href="#">Sales</a></div>
-                          <div class="col-4 text-center"><a href="#">Friends</a></div>
+                          <div class="col-4 text-center">
+                            <a href="#">Followers</a>
+                          </div>
+                          <div class="col-4 text-center">
+                            <a href="#">Sales</a>
+                          </div>
+                          <div class="col-4 text-center">
+                            <a href="#">Friends</a>
+                          </div>
                        </div>
                        <!--end::Row-->
                      </li>
@@ -960,6 +1001,7 @@
              <!--end::Container-->
            </nav>
            <!-- /.navbar -->
+
            <pre
              class="astro-code dark-plus"
              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
@@ -1211,7 +1253,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/components/main-sidebar.html
+++ b/dist/docs/components/main-sidebar.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Main Sidebar Component | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="Main Sidebar Component | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Main Sidebar Component</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Main Sidebar Component</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -940,7 +968,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/faq.html
+++ b/dist/docs/faq.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>FAQ | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="FAQ | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">FAQ</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">FAQ</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -824,7 +852,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/how-to-contribute.html
+++ b/dist/docs/how-to-contribute.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>How To Contribute | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="How To Contribute | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">How To Contribute</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">How To Contribute</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -897,7 +925,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/introduction.html
+++ b/dist/docs/introduction.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Introduction | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="Introduction | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link active">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Introduction</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Introduction</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -881,7 +909,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/javascript/treeview.html
+++ b/dist/docs/javascript/treeview.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Treeview Plugin | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="Treeview Plugin | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Treeview Plugin</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Treeview Plugin</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -838,7 +866,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/layout.html
+++ b/dist/docs/layout.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="Layout | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Layout</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Layout</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -767,6 +795,7 @@
                is a good place to start building your app if you’d like to start from scratch.
              </p>
            </div>
+
            <p>The layout consists of five major parts:</p>
            <ul>
              <li>Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.</li>
@@ -777,6 +806,7 @@
              <li>Content <code>.app-main</code> . Contains the page header and content.</li>
              <li>Main Footer <code>.app-footer</code> . Contains the footer.</li>
            </ul>
+
            <h4>Layout Options</h4>
            <p>
              AdminLTE v4 provides a set of options to apply to your main layout. Each one of these
@@ -848,7 +878,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/docs/license.html
+++ b/dist/docs/license.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>License | AdminLTE 4</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="License | AdminLTE 4" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">License</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">License</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
@@ -822,7 +850,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/examples/lockscreen.html
+++ b/dist/examples/lockscreen.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Lockscreen</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Lockscreen" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -62,11 +69,14 @@
      <div class="lockscreen-logo">
        <a href="../index2.html"><b>Admin</b>LTE</a>
      </div>
+
      <div class="lockscreen-name">John Doe</div>
+
      <div class="lockscreen-item">
        <div class="lockscreen-image">
          <img src="../assets/img/user1-128x128.jpg" alt="User Image" />
        </div>
+
        <form class="lockscreen-credentials">
          <div class="input-group">
            <input type="password" class="form-control shadow-none" placeholder="password" />
@@ -78,6 +88,7 @@
          </div>
        </form>
      </div>
+
      <div class="help-block text-center">Enter your password to retrieve your session</div>
      <div class="text-center">
        <a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
@@ -95,6 +106,7 @@
        All rights reserved
      </div>
    </div>
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <script
      src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -122,7 +134,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/examples/login-v2.html
+++ b/dist/examples/login-v2.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Login Page v2</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Login Page v2" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -70,20 +77,25 @@
        </div>
        <div class="card-body login-card-body">
          <p class="login-box-msg">Sign in to start your session</p>
+
          <form action="../index3.html" method="post">
            <div class="input-group mb-1">
              <div class="form-floating">
                <input id="loginEmail" type="email" class="form-control" value="" placeholder="" />
                <label for="loginEmail">Email</label>
              </div>
-              <div class="input-group-text"><span class="bi bi-envelope"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-envelope"></span>
+              </div>
            </div>
            <div class="input-group mb-1">
              <div class="form-floating">
                <input id="loginPassword" type="password" class="form-control" placeholder="" />
                <label for="loginPassword">Password</label>
              </div>
-              <div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-lock-fill"></span>
+              </div>
            </div>
            <!--begin::Row-->
            <div class="row">
@@ -103,6 +115,7 @@
            </div>
            <!--end::Row-->
          </form>
+
          <div class="social-auth-links text-center mb-3 d-grid gap-2">
            <p>- OR -</p>
            <a href="#" class="btn btn-primary">
@@ -113,7 +126,10 @@
            </a>
          </div>
          <!-- /.social-auth-links -->
-          <p class="mb-1"><a href="forgot-password.html">I forgot my password</a></p>
+
+          <p class="mb-1">
+            <a href="forgot-password.html">I forgot my password</a>
+          </p>
          <p class="mb-0">
            <a href="register.html" class="text-center"> Register a new membership </a>
          </p>
@@ -122,6 +138,7 @@
      </div>
    </div>
    <!-- /.login-box -->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <script
      src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -149,7 +166,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/examples/login.html
+++ b/dist/examples/login.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Login Page</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Login Page" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -66,14 +73,19 @@
      <div class="card">
        <div class="card-body login-card-body">
          <p class="login-box-msg">Sign in to start your session</p>
+
          <form action="../index3.html" method="post">
            <div class="input-group mb-3">
              <input type="email" class="form-control" placeholder="Email" />
-              <div class="input-group-text"><span class="bi bi-envelope"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-envelope"></span>
+              </div>
            </div>
            <div class="input-group mb-3">
              <input type="password" class="form-control" placeholder="Password" />
-              <div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-lock-fill"></span>
+              </div>
            </div>
            <!--begin::Row-->
            <div class="row">
@@ -93,6 +105,7 @@
            </div>
            <!--end::Row-->
          </form>
+
          <div class="social-auth-links text-center mb-3 d-grid gap-2">
            <p>- OR -</p>
            <a href="#" class="btn btn-primary">
@@ -103,7 +116,10 @@
            </a>
          </div>
          <!-- /.social-auth-links -->
-          <p class="mb-1"><a href="forgot-password.html">I forgot my password</a></p>
+
+          <p class="mb-1">
+            <a href="forgot-password.html">I forgot my password</a>
+          </p>
          <p class="mb-0">
            <a href="register.html" class="text-center"> Register a new membership </a>
          </p>
@@ -112,6 +128,7 @@
      </div>
    </div>
    <!-- /.login-box -->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <script
      src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -139,7 +156,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/examples/register-v2.html
+++ b/dist/examples/register-v2.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Register Page v2</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Register Page v2" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,27 +78,34 @@
        </div>
        <div class="card-body register-card-body">
          <p class="register-box-msg">Register a new membership</p>
+
          <form action="../index3.html" method="post">
            <div class="input-group mb-1">
              <div class="form-floating">
                <input id="registerFullName" type="text" class="form-control" placeholder="" />
                <label for="registerFullName">Full Name</label>
              </div>
-              <div class="input-group-text"><span class="bi bi-person"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-person"></span>
+              </div>
            </div>
            <div class="input-group mb-1">
              <div class="form-floating">
                <input id="registerEmail" type="email" class="form-control" placeholder="" />
                <label for="registerEmail">Email</label>
              </div>
-              <div class="input-group-text"><span class="bi bi-envelope"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-envelope"></span>
+              </div>
            </div>
            <div class="input-group mb-1">
              <div class="form-floating">
                <input id="registerPassword" type="password" class="form-control" placeholder="" />
                <label for="registerPassword">Password</label>
              </div>
-              <div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-lock-fill"></span>
+              </div>
            </div>
            <!--begin::Row-->
            <div class="row">
@@ -113,6 +127,7 @@
            </div>
            <!--end::Row-->
          </form>
+
          <div class="social-auth-links text-center mb-3 d-grid gap-2">
            <p>- OR -</p>
            <a href="#" class="btn btn-primary">
@@ -123,6 +138,7 @@
            </a>
          </div>
          <!-- /.social-auth-links -->
+
          <p class="mb-0">
            <a href="login.html" class="link-primary text-center"> I already have a membership </a>
          </p>
@@ -131,6 +147,7 @@
      </div>
    </div>
    <!-- /.register-box -->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <script
      src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -158,7 +175,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/examples/register.html
+++ b/dist/examples/register.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Register Page</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Register Page" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -66,18 +73,25 @@
      <div class="card">
        <div class="card-body register-card-body">
          <p class="register-box-msg">Register a new membership</p>
+
          <form action="../index3.html" method="post">
            <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Full Name" />
-              <div class="input-group-text"><span class="bi bi-person"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-person"></span>
+              </div>
            </div>
            <div class="input-group mb-3">
              <input type="email" class="form-control" placeholder="Email" />
-              <div class="input-group-text"><span class="bi bi-envelope"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-envelope"></span>
+              </div>
            </div>
            <div class="input-group mb-3">
              <input type="password" class="form-control" placeholder="Password" />
-              <div class="input-group-text"><span class="bi bi-lock-fill"></span></div>
+              <div class="input-group-text">
+                <span class="bi bi-lock-fill"></span>
+              </div>
            </div>
            <!--begin::Row-->
            <div class="row">
@@ -99,6 +113,7 @@
            </div>
            <!--end::Row-->
          </form>
+
          <div class="social-auth-links text-center mb-3 d-grid gap-2">
            <p>- OR -</p>
            <a href="#" class="btn btn-primary">
@@ -109,6 +124,7 @@
            </a>
          </div>
          <!-- /.social-auth-links -->
+
          <p class="mb-0">
            <a href="login.html" class="text-center"> I already have a membership </a>
          </p>
@@ -117,6 +133,7 @@
      </div>
    </div>
    <!-- /.register-box -->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <script
      src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -144,7 +161,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/forms/general.html
+++ b/dist/forms/general.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | General Form Elements</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | General Form Elements" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">General Form</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">General Form</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -775,7 +803,9 @@
                <!--begin::Quick Example-->
                <div class="card card-primary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Quick Example</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Quick Example</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Form-->
                  <form>
@@ -819,7 +849,9 @@
                <!--begin::Input Group-->
                <div class="card card-success card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Input Group</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Input Group</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -833,6 +865,7 @@
                        aria-describedby="basic-addon1"
                      />
                    </div>
+
                    <div class="input-group mb-3">
                      <input
                        type="text"
@@ -843,6 +876,7 @@
                      />
                      <span class="input-group-text" id="basic-addon2">@example.com</span>
                    </div>
+
                    <div class="mb-3">
                      <label for="basic-url" class="form-label">Your vanity URL</label>
                      <div class="input-group">
@@ -860,6 +894,7 @@
                        Example help text goes outside the input group.
                      </div>
                    </div>
+
                    <div class="input-group mb-3">
                      <span class="input-group-text">$</span>
                      <input
@@ -869,6 +904,7 @@
                      />
                      <span class="input-group-text">.00</span>
                    </div>
+
                    <div class="input-group mb-3">
                      <input
                        type="text"
@@ -884,6 +920,7 @@
                        aria-label="Server"
                      />
                    </div>
+
                    <div class="input-group">
                      <span class="input-group-text">With textarea</span>
                      <textarea class="form-control" aria-label="With textarea"></textarea>
@@ -900,7 +937,9 @@
                <!--begin::Horizontal Form-->
                <div class="card card-warning card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Horizontal Form</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Horizontal Form</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Form-->
                  <form>
@@ -986,7 +1025,9 @@
                <!--begin::Different Height-->
                <div class="card card-secondary card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Different Height</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Different Height</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1017,7 +1058,9 @@
                <!--begin::Different Width-->
                <div class="card card-danger card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Different Width</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Different Width</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body">
@@ -1047,7 +1090,9 @@
                <!--begin::Form Validation-->
                <div class="card card-info card-outline mb-4">
                  <!--begin::Header-->
-                  <div class="card-header"><div class="card-title">Form Validation</div></div>
+                  <div class="card-header">
+                    <div class="card-title">Form Validation</div>
+                  </div>
                  <!--end::Header-->
                  <!--begin::Form-->
                  <form class="needs-validation" novalidate>
@@ -1242,7 +1287,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/generate/theme.html
+++ b/dist/generate/theme.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Theme Customize</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Theme Customize" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -279,6 +301,7 @@
          <!--end::Brand Link-->
        </div>
        <!--end::Sidebar Brand-->
+
        <!--begin::Sidebar Wrapper-->
        <div class="sidebar-wrapper">
          <nav class="mt-2">
@@ -370,7 +393,9 @@
            <!--begin::Row-->
            <div class="row">
              <!--begin::Col-->
-              <div class="col-sm-6"><h3 class="mb-0">Theme Customize</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Theme Customize</h3>
+              </div>
              <!--end::Col-->
              <!--begin::Col-->
              <div class="col-sm-6">
@@ -401,6 +426,7 @@
                    <!--begin::Card Title-->
                    <h3 class="card-title">Sidebar Theme</h3>
                    <!--end::Card Title-->
+
                    <!--begin::Card Toolbar-->
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
@@ -448,7 +474,9 @@
                      </div>
                      <!--end::Col-->
                      <!--begin::Col-->
-                      <div class="col-md-6"><div id="sidebar-color-code" class="w-100"></div></div>
+                      <div class="col-md-6">
+                        <div id="sidebar-color-code" class="w-100"></div>
+                      </div>
                      <!--end::Col-->
                    </div>
                    <!--end::Row-->
@@ -467,6 +495,7 @@
                  <!--end::Card Footer-->
                </div>
                <!--end::Card-->
+
                <!--begin::Card-->
                <div class="card mt-4">
                  <!--begin::Card Header-->
@@ -474,6 +503,7 @@
                    <!--begin::Card Title-->
                    <h3 class="card-title">Navbar Theme</h3>
                    <!--end::Card Title-->
+
                    <!--begin::Card Toolbar-->
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
@@ -521,7 +551,9 @@
                      </div>
                      <!--end::Col-->
                      <!--begin::Col-->
-                      <div class="col-md-6"><div id="navbar-color-code" class="w-100"></div></div>
+                      <div class="col-md-6">
+                        <div id="navbar-color-code" class="w-100"></div>
+                      </div>
                      <!--end::Col-->
                    </div>
                    <!--end::Row-->
@@ -540,6 +572,7 @@
                  <!--end::Card Footer-->
                </div>
                <!--end::Card-->
+
                <!--begin::Card-->
                <div class="card mt-4">
                  <!--begin::Card Header-->
@@ -547,6 +580,7 @@
                    <!--begin::Card Title-->
                    <h3 class="card-title">Footer Theme</h3>
                    <!--end::Card Title-->
+
                    <!--begin::Card Toolbar-->
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
@@ -594,7 +628,9 @@
                      </div>
                      <!--end::Col-->
                      <!--begin::Col-->
-                      <div class="col-md-6"><div id="footer-color-code" class="w-100"></div></div>
+                      <div class="col-md-6">
+                        <div id="footer-color-code" class="w-100"></div>
+                      </div>
                      <!--end::Col-->
                    </div>
                    <!--end::Row-->
@@ -667,7 +703,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/index.html
+++ b/dist/index.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE v4 | Dashboard</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE v4 | Dashboard" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="./css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,9 +57,11 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="./css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
+
    <!-- apexcharts -->
    <link
      rel="stylesheet"
@@ -61,6 +69,7 @@
      integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
      crossorigin="anonymous"
    />
+
    <!-- jsvectormap -->
    <link
      rel="stylesheet"
@@ -85,10 +94,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -98,6 +112,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -187,6 +202,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -215,6 +231,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -223,6 +240,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -251,9 +269,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -504,6 +528,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -568,6 +593,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="./docs/introduction.html" class="nav-link">
@@ -651,6 +677,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -716,6 +743,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -750,7 +778,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Dashboard</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Dashboard</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -775,6 +805,7 @@
                <div class="small-box text-bg-primary">
                  <div class="inner">
                    <h3>150</h3>
+
                    <p>New Orders</p>
                  </div>
                  <svg
@@ -803,6 +834,7 @@
                <div class="small-box text-bg-success">
                  <div class="inner">
                    <h3>53<sup class="fs-5">%</sup></h3>
+
                    <p>Bounce Rate</p>
                  </div>
                  <svg
@@ -831,6 +863,7 @@
                <div class="small-box text-bg-warning">
                  <div class="inner">
                    <h3>44</h3>
+
                    <p>User Registrations</p>
                  </div>
                  <svg
@@ -859,6 +892,7 @@
                <div class="small-box text-bg-danger">
                  <div class="inner">
                    <h3>65</h3>
+
                    <p>Unique Visitors</p>
                  </div>
                  <svg
@@ -896,14 +930,21 @@
              <!-- Start col -->
              <div class="col-lg-7 connectedSortable">
                <div class="card mb-4">
-                  <div class="card-header"><h3 class="card-title">Sales Value</h3></div>
-                  <div class="card-body"><div id="revenue-chart"></div></div>
+                  <div class="card-header">
+                    <h3 class="card-title">Sales Value</h3>
+                  </div>
+
+                  <div class="card-body">
+                    <div id="revenue-chart"></div>
+                  </div>
                </div>
                <!-- /.card -->
+
                <!-- DIRECT CHAT -->
                <div class="card direct-chat direct-chat-primary mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Direct Chat</h3>
+
                    <div class="card-tools">
                      <span title="3 New Messages" class="badge text-bg-primary"> 3 </span>
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
@@ -946,6 +987,7 @@
                        <!-- /.direct-chat-text -->
                      </div>
                      <!-- /.direct-chat-msg -->
+
                      <!-- Message to the end -->
                      <div class="direct-chat-msg end">
                        <div class="direct-chat-infos clearfix">
@@ -963,6 +1005,7 @@
                        <!-- /.direct-chat-text -->
                      </div>
                      <!-- /.direct-chat-msg -->
+
                      <!-- Message. Default to the start -->
                      <div class="direct-chat-msg">
                        <div class="direct-chat-infos clearfix">
@@ -982,6 +1025,7 @@
                        <!-- /.direct-chat-text -->
                      </div>
                      <!-- /.direct-chat-msg -->
+
                      <!-- Message to the end -->
                      <div class="direct-chat-msg end">
                        <div class="direct-chat-infos clearfix">
@@ -1001,6 +1045,7 @@
                      <!-- /.direct-chat-msg -->
                    </div>
                    <!-- /.direct-chat-messages-->
+
                    <!-- Contacts are loaded here -->
                    <div class="direct-chat-contacts">
                      <ul class="contacts-list">
@@ -1011,6 +1056,7 @@
                              src="./assets/img/user1-128x128.jpg"
                              alt="User Avatar"
                            />
+
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Count Dracula
@@ -1029,6 +1075,7 @@
                              src="./assets/img/user7-128x128.jpg"
                              alt="User Avatar"
                            />
+
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Sarah Doe
@@ -1047,6 +1094,7 @@
                              src="./assets/img/user3-128x128.jpg"
                              alt="User Avatar"
                            />
+
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Nadia Jolie
@@ -1065,6 +1113,7 @@
                              src="./assets/img/user5-128x128.jpg"
                              alt="User Avatar"
                            />
+
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Nora S. Vans
@@ -1083,6 +1132,7 @@
                              src="./assets/img/user6-128x128.jpg"
                              alt="User Avatar"
                            />
+
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                John K.
@@ -1101,6 +1151,7 @@
                              src="./assets/img/user8-128x128.jpg"
                              alt="User Avatar"
                            />
+
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Kenneth M.
@@ -1138,6 +1189,7 @@
                <!-- /.direct-chat -->
              </div>
              <!-- /.Start col -->
+
              <!-- Start col -->
              <div class="col-lg-5 connectedSortable">
                <div class="card text-white bg-primary bg-gradient border-primary mb-4">
@@ -1154,7 +1206,9 @@
                      </button>
                    </div>
                  </div>
-                  <div class="card-body"><div id="world-map" style="height: 220px"></div></div>
+                  <div class="card-body">
+                    <div id="world-map" style="height: 220px"></div>
+                  </div>
                  <div class="card-footer border-0">
                    <!--begin::Row-->
                    <div class="row">
@@ -1228,7 +1282,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
@@ -1240,12 +1302,15 @@
      });
    </script>
    <!--end::OverlayScrollbars Configure-->
+
    <!-- OPTIONAL SCRIPTS -->
+
    <!-- sortablejs -->
    <script
      src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
      crossorigin="anonymous"
    ></script>
+
    <!-- sortablejs -->
    <script>
      new Sortable(document.querySelector('.connectedSortable'), {
@@ -1258,12 +1323,14 @@
        cardHeader.style.cursor = 'move';
      });
    </script>
+
    <!-- apexcharts -->
    <script
      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
      crossorigin="anonymous"
    ></script>
+
    <!-- ChartJS -->
    <script>
      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@@ -1323,6 +1390,7 @@
      );
      sales_chart.render();
    </script>
+
    <!-- jsvectormap -->
    <script
      src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
@@ -1334,6 +1402,7 @@
      integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
      crossorigin="anonymous"
    ></script>
+
    <!-- jsvectormap -->
    <script>
      // World map by jsVectorMap
--- a/dist/index2.html
+++ b/dist/index2.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE | Dashboard v2</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE | Dashboard v2" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="./css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,9 +57,11 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="./css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
+
    <!-- apexcharts -->
    <link
      rel="stylesheet"
@@ -62,6 +70,7 @@
      crossorigin="anonymous"
    />
  </head>
+
  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
@@ -76,10 +85,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -89,6 +103,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -178,6 +193,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -206,6 +222,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -214,6 +231,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -242,9 +260,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -495,6 +519,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -559,6 +584,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="./docs/introduction.html" class="nav-link">
@@ -642,6 +668,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -707,6 +734,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -741,7 +769,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Dashboard v2</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Dashboard v2</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -763,6 +793,7 @@
                  <span class="info-box-icon text-bg-primary shadow-sm">
                    <i class="bi bi-gear-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">CPU Traffic</span>
                    <span class="info-box-number">
@@ -780,6 +811,7 @@
                  <span class="info-box-icon text-bg-danger shadow-sm">
                    <i class="bi bi-hand-thumbs-up-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Likes</span>
                    <span class="info-box-number">41,410</span>
@@ -789,13 +821,16 @@
                <!-- /.info-box -->
              </div>
              <!-- /.col -->
+
              <!-- fix for small devices only -->
              <!-- <div class="clearfix hidden-md-up"></div> -->
+
              <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                  <span class="info-box-icon text-bg-success shadow-sm">
                    <i class="bi bi-cart-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Sales</span>
                    <span class="info-box-number">760</span>
@@ -810,6 +845,7 @@
                  <span class="info-box-icon text-bg-warning shadow-sm">
                    <i class="bi bi-people-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">New Members</span>
                    <span class="info-box-number">2,000</span>
@@ -821,12 +857,14 @@
              <!-- /.col -->
            </div>
            <!-- /.row -->
+
            <!--begin::Row-->
            <div class="row">
              <div class="col-md-12">
                <div class="card mb-4">
                  <div class="card-header">
                    <h5 class="card-title">Monthly Recap Report</h5>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -861,11 +899,15 @@
                        <p class="text-center">
                          <strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
                        </p>
+
                        <div id="sales-chart"></div>
                      </div>
                      <!-- /.col -->
                      <div class="col-md-4">
-                        <p class="text-center"><strong>Goal Completion</strong></p>
+                        <p class="text-center">
+                          <strong>Goal Completion</strong>
+                        </p>
+
                        <div class="progress-group">
                          Add Products to Cart
                          <span class="float-end"><b>160</b>/200</span>
@@ -874,6 +916,7 @@
                          </div>
                        </div>
                        <!-- /.progress-group -->
+
                        <div class="progress-group">
                          Complete Purchase
                          <span class="float-end"><b>310</b>/400</span>
@@ -881,6 +924,7 @@
                            <div class="progress-bar text-bg-danger" style="width: 75%"></div>
                          </div>
                        </div>
+
                        <!-- /.progress-group -->
                        <div class="progress-group">
                          <span class="progress-text">Visit Premium Page</span>
@@ -889,6 +933,7 @@
                            <div class="progress-bar text-bg-success" style="width: 60%"></div>
                          </div>
                        </div>
+
                        <!-- /.progress-group -->
                        <div class="progress-group">
                          Send Inquiries
@@ -916,6 +961,7 @@
                          <span class="text-uppercase">TOTAL REVENUE</span>
                        </div>
                      </div>
+
                      <!-- /.col -->
                      <div class="col-md-3 col-6">
                        <div class="text-center border-end">
@@ -954,6 +1000,7 @@
              <!-- /.col -->
            </div>
            <!--end::Row-->
+
            <!--begin::Row-->
            <div class="row">
              <!-- Start col -->
@@ -965,6 +1012,7 @@
                    <div class="card direct-chat direct-chat-warning">
                      <div class="card-header">
                        <h3 class="card-title">Direct Chat</h3>
+
                        <div class="card-tools">
                          <span title="3 New Messages" class="badge text-bg-warning"> 3 </span>
                          <button
@@ -1011,6 +1059,7 @@
                            <!-- /.direct-chat-text -->
                          </div>
                          <!-- /.direct-chat-msg -->
+
                          <!-- Message to the end -->
                          <div class="direct-chat-msg end">
                            <div class="direct-chat-infos clearfix">
@@ -1030,6 +1079,7 @@
                            <!-- /.direct-chat-text -->
                          </div>
                          <!-- /.direct-chat-msg -->
+
                          <!-- Message. Default to the start -->
                          <div class="direct-chat-msg">
                            <div class="direct-chat-infos clearfix">
@@ -1049,6 +1099,7 @@
                            <!-- /.direct-chat-text -->
                          </div>
                          <!-- /.direct-chat-msg -->
+
                          <!-- Message to the end -->
                          <div class="direct-chat-msg end">
                            <div class="direct-chat-infos clearfix">
@@ -1070,6 +1121,7 @@
                          <!-- /.direct-chat-msg -->
                        </div>
                        <!-- /.direct-chat-messages-->
+
                        <!-- Contacts are loaded here -->
                        <div class="direct-chat-contacts">
                          <ul class="contacts-list">
@@ -1080,6 +1132,7 @@
                                  src="./assets/img/user1-128x128.jpg"
                                  alt="User Avatar"
                                />
+
                                <div class="contacts-list-info">
                                  <span class="contacts-list-name">
                                    Count Dracula
@@ -1100,6 +1153,7 @@
                                  src="./assets/img/user7-128x128.jpg"
                                  alt="User Avatar"
                                />
+
                                <div class="contacts-list-info">
                                  <span class="contacts-list-name">
                                    Sarah Doe
@@ -1118,6 +1172,7 @@
                                  src="./assets/img/user3-128x128.jpg"
                                  alt="User Avatar"
                                />
+
                                <div class="contacts-list-info">
                                  <span class="contacts-list-name">
                                    Nadia Jolie
@@ -1136,6 +1191,7 @@
                                  src="./assets/img/user5-128x128.jpg"
                                  alt="User Avatar"
                                />
+
                                <div class="contacts-list-info">
                                  <span class="contacts-list-name">
                                    Nora S. Vans
@@ -1154,6 +1210,7 @@
                                  src="./assets/img/user6-128x128.jpg"
                                  alt="User Avatar"
                                />
+
                                <div class="contacts-list-info">
                                  <span class="contacts-list-name">
                                    John K.
@@ -1172,6 +1229,7 @@
                                  src="./assets/img/user8-128x128.jpg"
                                  alt="User Avatar"
                                />
+
                                <div class="contacts-list-info">
                                  <span class="contacts-list-name">
                                    Kenneth M.
@@ -1209,11 +1267,13 @@
                    <!-- /.direct-chat -->
                  </div>
                  <!-- /.col -->
+
                  <div class="col-md-6">
                    <!-- USERS LIST -->
                    <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">Latest Members</h3>
+
                        <div class="card-tools">
                          <span class="badge text-bg-danger"> 8 New Members </span>
                          <button
@@ -1362,10 +1422,12 @@
                  <!-- /.col -->
                </div>
                <!--end::Row-->
+
                <!--begin::Latest Order Widget-->
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Latest Orders</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -1398,8 +1460,12 @@
                              >
                            </td>
                            <td>Call of Duty IV</td>
-                            <td><span class="badge text-bg-success"> Shipped </span></td>
-                            <td><div id="table-sparkline-1"></div></td>
+                            <td>
+                              <span class="badge text-bg-success"> Shipped </span>
+                            </td>
+                            <td>
+                              <div id="table-sparkline-1"></div>
+                            </td>
                          </tr>
                          <tr>
                            <td>
@@ -1410,8 +1476,12 @@
                              >
                            </td>
                            <td>Samsung Smart TV</td>
-                            <td><span class="badge text-bg-warning">Pending</span></td>
-                            <td><div id="table-sparkline-2"></div></td>
+                            <td>
+                              <span class="badge text-bg-warning">Pending</span>
+                            </td>
+                            <td>
+                              <div id="table-sparkline-2"></div>
+                            </td>
                          </tr>
                          <tr>
                            <td>
@@ -1422,8 +1492,12 @@
                              >
                            </td>
                            <td>iPhone 6 Plus</td>
-                            <td><span class="badge text-bg-danger"> Delivered </span></td>
-                            <td><div id="table-sparkline-3"></div></td>
+                            <td>
+                              <span class="badge text-bg-danger"> Delivered </span>
+                            </td>
+                            <td>
+                              <div id="table-sparkline-3"></div>
+                            </td>
                          </tr>
                          <tr>
                            <td>
@@ -1434,8 +1508,12 @@
                              >
                            </td>
                            <td>Samsung Smart TV</td>
-                            <td><span class="badge text-bg-info">Processing</span></td>
-                            <td><div id="table-sparkline-4"></div></td>
+                            <td>
+                              <span class="badge text-bg-info">Processing</span>
+                            </td>
+                            <td>
+                              <div id="table-sparkline-4"></div>
+                            </td>
                          </tr>
                          <tr>
                            <td>
@@ -1446,8 +1524,12 @@
                              >
                            </td>
                            <td>Samsung Smart TV</td>
-                            <td><span class="badge text-bg-warning">Pending</span></td>
-                            <td><div id="table-sparkline-5"></div></td>
+                            <td>
+                              <span class="badge text-bg-warning">Pending</span>
+                            </td>
+                            <td>
+                              <div id="table-sparkline-5"></div>
+                            </td>
                          </tr>
                          <tr>
                            <td>
@@ -1458,8 +1540,12 @@
                              >
                            </td>
                            <td>iPhone 6 Plus</td>
-                            <td><span class="badge text-bg-danger"> Delivered </span></td>
-                            <td><div id="table-sparkline-6"></div></td>
+                            <td>
+                              <span class="badge text-bg-danger"> Delivered </span>
+                            </td>
+                            <td>
+                              <div id="table-sparkline-6"></div>
+                            </td>
                          </tr>
                          <tr>
                            <td>
@@ -1470,8 +1556,12 @@
                              >
                            </td>
                            <td>Call of Duty IV</td>
-                            <td><span class="badge text-bg-success">Shipped</span></td>
-                            <td><div id="table-sparkline-7"></div></td>
+                            <td>
+                              <span class="badge text-bg-success">Shipped</span>
+                            </td>
+                            <td>
+                              <div id="table-sparkline-7"></div>
+                            </td>
                          </tr>
                        </tbody>
                      </table>
@@ -1492,10 +1582,14 @@
                <!-- /.card -->
              </div>
              <!-- /.col -->
+
              <div class="col-md-4">
                <!-- Info Boxes Style 2 -->
                <div class="info-box mb-3 text-bg-warning">
-                  <span class="info-box-icon"> <i class="bi bi-tag-fill"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-tag-fill"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Inventory</span>
                    <span class="info-box-number">5,200</span>
@@ -1504,7 +1598,10 @@
                </div>
                <!-- /.info-box -->
                <div class="info-box mb-3 text-bg-success">
-                  <span class="info-box-icon"> <i class="bi bi-heart-fill"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-heart-fill"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Mentions</span>
                    <span class="info-box-number">92,050</span>
@@ -1513,7 +1610,10 @@
                </div>
                <!-- /.info-box -->
                <div class="info-box mb-3 text-bg-danger">
-                  <span class="info-box-icon"> <i class="bi bi-cloud-download"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-cloud-download"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Downloads</span>
                    <span class="info-box-number">114,381</span>
@@ -1522,7 +1622,10 @@
                </div>
                <!-- /.info-box -->
                <div class="info-box mb-3 text-bg-info">
-                  <span class="info-box-icon"> <i class="bi bi-chat-fill"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-chat-fill"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Direct Messages</span>
                    <span class="info-box-number">163,921</span>
@@ -1530,9 +1633,11 @@
                  <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
+
                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Browser Usage</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -1547,7 +1652,9 @@
                  <div class="card-body">
                    <!--begin::Row-->
                    <div class="row">
-                      <div class="col-12"><div id="pie-chart"></div></div>
+                      <div class="col-12">
+                        <div id="pie-chart"></div>
+                      </div>
                      <!-- /.col -->
                    </div>
                    <!--end::Row-->
@@ -1585,10 +1692,12 @@
                  <!-- /.footer -->
                </div>
                <!-- /.card -->
+
                <!-- PRODUCT LIST -->
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Recently Added Products</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -1737,7 +1846,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
@@ -1749,13 +1866,16 @@
      });
    </script>
    <!--end::OverlayScrollbars Configure-->
+
    <!-- OPTIONAL SCRIPTS -->
+
    <!-- apexcharts -->
    <script
      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
      crossorigin="anonymous"
    ></script>
+
    <script>
      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
      // IT'S ALL JUST JUNK FOR DEMO
--- a/dist/index3.html
+++ b/dist/index3.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE | Dashboard v3</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE | Dashboard v3" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="./css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,9 +57,11 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="./css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
+
    <!-- apexcharts -->
    <link
      rel="stylesheet"
@@ -62,6 +70,7 @@
      crossorigin="anonymous"
    />
  </head>
+
  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
@@ -76,10 +85,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -89,6 +103,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -178,6 +193,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -206,6 +222,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -214,6 +231,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -242,9 +260,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -495,6 +519,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -559,6 +584,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="./docs/introduction.html" class="nav-link">
@@ -642,6 +668,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -707,6 +734,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -741,7 +769,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Dashboard v3</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Dashboard v3</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -773,7 +803,8 @@
                  <div class="card-body">
                    <div class="d-flex">
                      <p class="d-flex flex-column">
-                        <span class="fw-bold fs-5">820</span> <span>Visitors Over Time</span>
+                        <span class="fw-bold fs-5">820</span>
+                        <span>Visitors Over Time</span>
                      </p>
                      <p class="ms-auto d-flex flex-column text-end">
                        <span class="text-success"> <i class="bi bi-arrow-up"></i> 12.5% </span>
@@ -781,22 +812,32 @@
                      </p>
                    </div>
                    <!-- /.d-flex -->
-                    <div class="position-relative mb-4"><div id="visitors-chart"></div></div>
+
+                    <div class="position-relative mb-4">
+                      <div id="visitors-chart"></div>
+                    </div>
+
                    <div class="d-flex flex-row justify-content-end">
                      <span class="me-2">
                        <i class="bi bi-square-fill text-primary"></i> This Week
                      </span>
+
                      <span> <i class="bi bi-square-fill text-secondary"></i> Last Week </span>
                    </div>
                  </div>
                </div>
                <!-- /.card -->
+
                <div class="card mb-4">
                  <div class="card-header border-0">
                    <h3 class="card-title">Products</h3>
                    <div class="card-tools">
-                      <a href="#" class="btn btn-tool btn-sm"> <i class="bi bi-download"></i> </a>
-                      <a href="#" class="btn btn-tool btn-sm"> <i class="bi bi-list"></i> </a>
+                      <a href="#" class="btn btn-tool btn-sm">
+                        <i class="bi bi-download"></i>
+                      </a>
+                      <a href="#" class="btn btn-tool btn-sm">
+                        <i class="bi bi-list"></i>
+                      </a>
                    </div>
                  </div>
                  <div class="card-body table-responsive p-0">
@@ -828,7 +869,9 @@
                            12,000 Sold
                          </td>
                          <td>
-                            <a href="#" class="text-secondary"> <i class="bi bi-search"></i> </a>
+                            <a href="#" class="text-secondary">
+                              <i class="bi bi-search"></i>
+                            </a>
                          </td>
                        </tr>
                        <tr>
@@ -849,7 +892,9 @@
                            123,234 Sold
                          </td>
                          <td>
-                            <a href="#" class="text-secondary"> <i class="bi bi-search"></i> </a>
+                            <a href="#" class="text-secondary">
+                              <i class="bi bi-search"></i>
+                            </a>
                          </td>
                        </tr>
                        <tr>
@@ -870,7 +915,9 @@
                            198 Sold
                          </td>
                          <td>
-                            <a href="#" class="text-secondary"> <i class="bi bi-search"></i> </a>
+                            <a href="#" class="text-secondary">
+                              <i class="bi bi-search"></i>
+                            </a>
                          </td>
                        </tr>
                        <tr>
@@ -892,7 +939,9 @@
                            87 Sold
                          </td>
                          <td>
-                            <a href="#" class="text-secondary"> <i class="bi bi-search"></i> </a>
+                            <a href="#" class="text-secondary">
+                              <i class="bi bi-search"></i>
+                            </a>
                          </td>
                        </tr>
                      </tbody>
@@ -917,7 +966,8 @@
                  <div class="card-body">
                    <div class="d-flex">
                      <p class="d-flex flex-column">
-                        <span class="fw-bold fs-5">$18,230.00</span> <span>Sales Over Time</span>
+                        <span class="fw-bold fs-5">$18,230.00</span>
+                        <span>Sales Over Time</span>
                      </p>
                      <p class="ms-auto d-flex flex-column text-end">
                        <span class="text-success"> <i class="bi bi-arrow-up"></i> 33.1% </span>
@@ -925,22 +975,32 @@
                      </p>
                    </div>
                    <!-- /.d-flex -->
-                    <div class="position-relative mb-4"><div id="sales-chart"></div></div>
+
+                    <div class="position-relative mb-4">
+                      <div id="sales-chart"></div>
+                    </div>
+
                    <div class="d-flex flex-row justify-content-end">
                      <span class="me-2">
                        <i class="bi bi-square-fill text-primary"></i> This year
                      </span>
+
                      <span> <i class="bi bi-square-fill text-secondary"></i> Last year </span>
                    </div>
                  </div>
                </div>
                <!-- /.card -->
+
                <div class="card">
                  <div class="card-header border-0">
                    <h3 class="card-title">Online Store Overview</h3>
                    <div class="card-tools">
-                      <a href="#" class="btn btn-sm btn-tool"> <i class="bi bi-download"></i> </a>
-                      <a href="#" class="btn btn-sm btn-tool"> <i class="bi bi-list"></i> </a>
+                      <a href="#" class="btn btn-sm btn-tool">
+                        <i class="bi bi-download"></i>
+                      </a>
+                      <a href="#" class="btn btn-sm btn-tool">
+                        <i class="bi bi-list"></i>
+                      </a>
                    </div>
                  </div>
                  <div class="card-body">
@@ -1083,7 +1143,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
@@ -1095,13 +1163,16 @@
      });
    </script>
    <!--end::OverlayScrollbars Configure-->
+
    <!-- OPTIONAL SCRIPTS -->
+
    <!-- apexcharts -->
    <script
      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
      crossorigin="anonymous"
    ></script>
+
    <script>
      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
      // IT'S ALL JUST JUNK FOR DEMO
--- a/dist/js/adminlte.js
+++ b/dist/js/adminlte.js
@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.0.0-rc3 (https://adminlte.io)
+ * AdminLTE v4.0.0-rc4 (https://adminlte.io)
 * Copyright 2014-2025 Colorlib <https://colorlib.com>
 * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
 */
@@ -641,8 +641,14 @@
            const sidebar = document.getElementsByClassName(sidebarExpand)[0];
            const sidebarContent = globalThis.getComputedStyle(sidebar, '::before').getPropertyValue('content');
            this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) };
+            // FIXED: Don't auto-collapse on mobile if sidebar is currently open
+            // This prevents resize events (triggered by scrolling) from closing the sidebar
+            const isCurrentlyOpen = document.body.classList.contains(CLASS_NAME_SIDEBAR_OPEN);
            if (window.innerWidth <= this._config.sidebarBreakpoint) {
-                this.collapse();
+                // Only collapse if not currently open (prevents scroll-triggered closes)
+                if (!isCurrentlyOpen) {
+                    this.collapse();
+                }
            }
            else {
                if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
@@ -682,20 +688,22 @@
        const sidebarOverlay = document.createElement('div');
        sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY;
        document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay);
-        let isTouchMoved = false;
+        let overlayTouchMoved = false;
+        // Handle touch events on overlay (area outside sidebar)
        sidebarOverlay.addEventListener('touchstart', () => {
-            isTouchMoved = false;
+            overlayTouchMoved = false;
        }, { passive: true });
        sidebarOverlay.addEventListener('touchmove', () => {
-            isTouchMoved = true;
+            overlayTouchMoved = true;
        }, { passive: true });
        sidebarOverlay.addEventListener('touchend', event => {
-            if (!isTouchMoved) {
+            if (!overlayTouchMoved) {
                event.preventDefault();
                const target = event.currentTarget;
                const data = new PushMenu(target, Defaults);
                data.collapse();
            }
+            overlayTouchMoved = false;
        }, { passive: false });
        sidebarOverlay.addEventListener('click', event => {
            event.preventDefault();
--- a/dist/js/adminlte.js.map
+++ b/dist/js/adminlte.js.map
--- a/dist/js/adminlte.min.js
+++ b/dist/js/adminlte.min.js
--- a/dist/js/adminlte.min.js.map
+++ b/dist/js/adminlte.min.js.map
--- a/dist/layout/collapsed-sidebar.html
+++ b/dist/layout/collapsed-sidebar.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Sidebar Mini</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Sidebar Mini" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Collapsed Sidebar</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Collapsed Sidebar</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -760,6 +788,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -839,7 +868,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/fixed-complete.html
+++ b/dist/layout/fixed-complete.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Fixed Complete</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Fixed Complete" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -73,10 +80,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -86,6 +98,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -175,6 +188,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -203,6 +217,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -211,6 +226,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -239,9 +255,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -492,6 +514,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -556,6 +579,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -639,6 +663,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -704,6 +729,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -730,6 +756,7 @@
        <!--end::Sidebar Wrapper-->
      </aside>
      <!--end::Sidebar-->
+
      <!--begin::App Main-->
      <main class="app-main">
        <!--begin::App Content Header-->
@@ -738,7 +765,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Fixed Complete</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fixed Complete</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -762,6 +791,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -841,7 +871,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/fixed-footer.html
+++ b/dist/layout/fixed-footer.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Fixed Footer</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Fixed Footer" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Fixed Footer</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fixed Footer</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -760,6 +788,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -838,7 +867,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/fixed-header.html
+++ b/dist/layout/fixed-header.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Fixed Header</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Fixed Header" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Fixed Header</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fixed Header</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -760,6 +788,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -838,7 +867,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/fixed-sidebar.html
+++ b/dist/layout/fixed-sidebar.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Fixed Sidebar</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Fixed Sidebar" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -728,6 +754,7 @@
        <!--end::Sidebar Wrapper-->
      </aside>
      <!--end::Sidebar-->
+
      <!--begin::App Main-->
      <main class="app-main">
        <!--begin::App Content Header-->
@@ -736,7 +763,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Fixed Layout</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fixed Layout</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -760,6 +789,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -839,7 +869,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/layout-custom-area.html
+++ b/dist/layout/layout-custom-area.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Layout Custom Area</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Layout Custom Area" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -728,6 +754,7 @@
        <!--end::Sidebar Wrapper-->
      </aside>
      <!--end::Sidebar-->
+
      <!--begin::App Main-->
      <main class="app-main">
        <!--begin::App Content Top Area-->
@@ -735,7 +762,10 @@
          <!--begin::Container-->
          <div class="container-fluid">
            <div class="row">
-              <div class="col-md-6"><div>App Content Top Area</div></div>
+              <div class="col-md-6">
+                <div>App Content Top Area</div>
+              </div>
+
              <div class="col-md-6 text-end">
                <button type="submit" class="btn btn-primary" name="save" value="create">
                  Create Admin
@@ -752,7 +782,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-8"><h3 class="mb-0">Layout Custom Area</h3></div>
+              <div class="col-sm-8">
+                <h3 class="mb-0">Layout Custom Area</h3>
+              </div>
              <div class="col-sm-4">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -776,6 +808,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -809,12 +842,16 @@
          <!--end::Container-->
        </div>
        <!--end::App Content-->
+
        <!--begin::App Content Bottom Area-->
        <div class="app-content-bottom-area">
          <!--begin::Container-->
          <div class="container-fluid">
            <div class="row">
-              <div class="col-md-6"><div>App Content Bottom Area</div></div>
+              <div class="col-md-6">
+                <div>App Content Bottom Area</div>
+              </div>
+
              <div class="col-md-6 text-end">
                <button type="submit" class="btn btn-secondary" name="save" value="create">
                  Refresh
@@ -871,7 +908,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/layout-rtl.html
+++ b/dist/layout/layout-rtl.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Layout RTL</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Layout RTL" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.rtl.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.rtl.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Layout RTL</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Layout RTL</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -760,6 +788,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -839,7 +868,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/logo-switch.html
+++ b/dist/layout/logo-switch.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Sidebar Mini</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Sidebar Mini" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -373,7 +395,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Logo Switch</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Logo Switch</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -397,6 +421,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -476,7 +501,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/sidebar-mini.html
+++ b/dist/layout/sidebar-mini.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Sidebar Mini</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Sidebar Mini" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Sidebar Mini</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Sidebar Mini</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -760,6 +788,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -839,7 +868,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/layout/unfixed-sidebar.html
+++ b/dist/layout/unfixed-sidebar.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Unfixed Sidebar</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Unfixed Sidebar" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Unfixed Layout</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Unfixed Layout</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -760,6 +788,7 @@
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Title</h3>
+
                    <div class="card-tools">
                      <button
                        type="button"
@@ -838,7 +867,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/tables/simple.html
+++ b/dist/tables/simple.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Simple Tables</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Simple Tables" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Simple Tables</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Simple Tables</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -757,7 +785,9 @@
            <div class="row">
              <div class="col-md-6">
                <div class="card mb-4">
-                  <div class="card-header"><h3 class="card-title">Bordered Table</h3></div>
+                  <div class="card-header">
+                    <h3 class="card-title">Bordered Table</h3>
+                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                    <table class="table table-bordered">
@@ -791,7 +821,9 @@
                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>3.</td>
@@ -801,7 +833,9 @@
                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>4.</td>
@@ -811,7 +845,9 @@
                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                        </tr>
                      </tbody>
                    </table>
@@ -819,15 +855,26 @@
                  <!-- /.card-body -->
                  <div class="card-footer clearfix">
                    <ul class="pagination pagination-sm m-0 float-end">
-                      <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
-                      <li class="page-item"><a class="page-link" href="#">1</a></li>
-                      <li class="page-item"><a class="page-link" href="#">2</a></li>
-                      <li class="page-item"><a class="page-link" href="#">3</a></li>
-                      <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">&laquo;</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">1</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">2</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">3</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">&raquo;</a>
+                      </li>
                    </ul>
                  </div>
                </div>
                <!-- /.card -->
+
                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Condensed Full Width Table</h3>
@@ -865,7 +912,9 @@
                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>3.</td>
@@ -875,7 +924,9 @@
                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>4.</td>
@@ -885,7 +936,9 @@
                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                        </tr>
                      </tbody>
                    </table>
@@ -899,13 +952,24 @@
                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Simple Full Width Table</h3>
+
                    <div class="card-tools">
                      <ul class="pagination pagination-sm float-end">
-                        <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
-                        <li class="page-item"><a class="page-link" href="#">1</a></li>
-                        <li class="page-item"><a class="page-link" href="#">2</a></li>
-                        <li class="page-item"><a class="page-link" href="#">3</a></li>
-                        <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">&laquo;</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">1</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">2</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">3</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">&raquo;</a>
+                        </li>
                      </ul>
                    </div>
                  </div>
@@ -942,7 +1006,9 @@
                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>3.</td>
@@ -952,7 +1018,9 @@
                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>4.</td>
@@ -962,7 +1030,9 @@
                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                        </tr>
                      </tbody>
                    </table>
@@ -970,6 +1040,7 @@
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
+
                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Striped Full Width Table</h3>
@@ -1007,7 +1078,9 @@
                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>3.</td>
@@ -1017,7 +1090,9 @@
                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                        </tr>
                        <tr class="align-middle">
                          <td>4.</td>
@@ -1027,7 +1102,9 @@
                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                            </div>
                          </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                        </tr>
                      </tbody>
                    </table>
@@ -1089,7 +1166,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/widgets/cards.html
+++ b/dist/widgets/cards.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Widgets - Cards</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Widgets - Cards" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Cards</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Cards</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -754,6 +782,7 @@
          <!--begin::Container-->
          <div class="container-fluid">
            <h4 class="mb-2">Cards</h4>
+
            <h5 class="mb-2">Abilities</h5>
            <!--begin::Row-->
            <div class="row g-4 mb-4">
@@ -761,6 +790,7 @@
                <div class="card card-primary collapsed-card">
                  <div class="card-header">
                    <h3 class="card-title">Expandable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -780,6 +810,7 @@
                <div class="card card-success">
                  <div class="card-header">
                    <h3 class="card-title">Collapsable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -799,6 +830,7 @@
                <div class="card card-warning">
                  <div class="card-header">
                    <h3 class="card-title">Removable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
                        <i class="bi bi-x-lg"></i>
@@ -817,6 +849,7 @@
                <div class="card card-danger">
                  <div class="card-header">
                    <h3 class="card-title">Maximizable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize">
                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
@@ -834,6 +867,7 @@
              <!-- /.col -->
            </div>
            <!--end::Row-->
+
            <h5 class="mb-2">Card Outlined</h5>
            <!--begin::Row-->
            <div class="row g-4 mb-4">
@@ -841,6 +875,7 @@
                <div class="card card-outline card-primary collapsed-card">
                  <div class="card-header">
                    <h3 class="card-title">Expandable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -860,6 +895,7 @@
                <div class="card card-outline card-success">
                  <div class="card-header">
                    <h3 class="card-title">Collapsable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -879,6 +915,7 @@
                <div class="card card-outline card-warning">
                  <div class="card-header">
                    <h3 class="card-title">Removable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
                        <i class="bi bi-x-lg"></i>
@@ -897,6 +934,7 @@
                <div class="card card-outline card-danger">
                  <div class="card-header">
                    <h3 class="card-title">Maximizable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize">
                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
@@ -914,6 +952,7 @@
              <!-- /.col -->
            </div>
            <!--end::Row-->
+
            <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
            <!--begin::Row-->
            <div class="row g-4 mb-4">
@@ -921,6 +960,7 @@
                <div class="card text-bg-primary collapsed-card">
                  <div class="card-header">
                    <h3 class="card-title">Expandable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -940,6 +980,7 @@
                <div class="card text-bg-success">
                  <div class="card-header">
                    <h3 class="card-title">Collapsable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
@@ -959,6 +1000,7 @@
                <div class="card text-bg-warning">
                  <div class="card-header">
                    <h3 class="card-title">Removable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
                        <i class="bi bi-x-lg"></i>
@@ -977,6 +1019,7 @@
                <div class="card text-bg-danger">
                  <div class="card-header">
                    <h3 class="card-title">Maximizable</h3>
+
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize">
                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
@@ -1044,7 +1087,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/widgets/info-box.html
+++ b/dist/widgets/info-box.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Widgets - Info Box</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Widgets - Info Box" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Info Box</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Info Box</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -761,6 +789,7 @@
                  <span class="info-box-icon text-bg-primary shadow-sm">
                    <i class="bi bi-gear-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">CPU Traffic</span>
                    <span class="info-box-number">
@@ -773,11 +802,13 @@
                <!-- /.info-box -->
              </div>
              <!-- /.col -->
+
              <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                  <span class="info-box-icon text-bg-success shadow-sm">
                    <i class="bi bi-cart-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Sales</span>
                    <span class="info-box-number">760</span>
@@ -787,13 +818,16 @@
                <!-- /.info-box -->
              </div>
              <!-- /.col -->
+
              <!-- fix for small devices only -->
              <!-- <div class="clearfix hidden-md-up"></div> -->
+
              <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                  <span class="info-box-icon text-bg-warning shadow-sm">
                    <i class="bi bi-people-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">New Members</span>
                    <span class="info-box-number">2,000</span>
@@ -803,11 +837,13 @@
                <!-- /.info-box -->
              </div>
              <!-- /.col -->
+
              <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                  <span class="info-box-icon text-bg-danger shadow-sm">
                    <i class="bi bi-hand-thumbs-up-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Likes</span>
                    <span class="info-box-number">41,410</span>
@@ -819,9 +855,13 @@
              <!-- /.col -->
            </div>
            <!--end::Row-->
+
            <!-- =========================================================== -->
            <h5 class="mb-2">
-              Info Box With Custom Shadows <small> <i>Using Bootstrap's Shadow Utility</i> </small>
+              Info Box With Custom Shadows
+              <small>
+                <i>Using Bootstrap's Shadow Utility</i>
+              </small>
            </h5>
            <!--begin::Row-->
            <div class="row">
@@ -830,6 +870,7 @@
                  <span class="info-box-icon text-bg-primary shadow-sm">
                    <i class="bi bi-gear-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">CPU Traffic</span>
                    <span class="info-box-number">
@@ -842,11 +883,13 @@
                <!-- /.info-box -->
              </div>
              <!-- /.col -->
+
              <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box shadow-sm">
                  <span class="info-box-icon text-bg-success shadow-sm">
                    <i class="bi bi-cart-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Sales</span>
                    <span class="info-box-number">760</span>
@@ -856,13 +899,16 @@
                <!-- /.info-box -->
              </div>
              <!-- /.col -->
+
              <!-- fix for small devices only -->
              <!-- <div class="clearfix hidden-md-up"></div> -->
+
              <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box shadow">
                  <span class="info-box-icon text-bg-warning shadow-sm">
                    <i class="bi bi-people-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">New Members</span>
                    <span class="info-box-number">2,000</span>
@@ -872,11 +918,13 @@
                <!-- /.info-box -->
              </div>
              <!-- /.col -->
+
              <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box shadow-lg">
                  <span class="info-box-icon text-bg-danger shadow-sm">
                    <i class="bi bi-hand-thumbs-up-fill"></i>
                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Likes</span>
                    <span class="info-box-number">41,410</span>
@@ -888,17 +936,24 @@
              <!-- /.col -->
            </div>
            <!--end::Row-->
+
            <!-- =========================================================== -->
            <h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
            <!--begin::Row-->
            <div class="row">
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-primary">
-                  <span class="info-box-icon"> <i class="bi bi-bookmark-fill"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-bookmark-fill"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Bookmarks</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -908,11 +963,17 @@
              <!-- /.col -->
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-success">
-                  <span class="info-box-icon"> <i class="bi bi-hand-thumbs-up"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-hand-thumbs-up"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Likes</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -922,11 +983,17 @@
              <!-- /.col -->
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-warning">
-                  <span class="info-box-icon"> <i class="bi bi-calendar3"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-calendar3"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Events</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -936,11 +1003,17 @@
              <!-- /.col -->
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-danger">
-                  <span class="info-box-icon"> <i class="bi bi-chat-text-fill"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-chat-text-fill"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Comments</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -950,17 +1023,24 @@
              <!-- /.col -->
            </div>
            <!--end::Row-->
+
            <!-- =========================================================== -->
            <h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
            <!--begin::Row-->
            <div class="row">
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-primary bg-gradient">
-                  <span class="info-box-icon"> <i class="bi bi-bookmark-fill"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-bookmark-fill"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Bookmarks</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -970,11 +1050,17 @@
              <!-- /.col -->
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-success bg-gradient">
-                  <span class="info-box-icon"> <i class="bi bi-hand-thumbs-up"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-hand-thumbs-up"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Likes</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -984,11 +1070,17 @@
              <!-- /.col -->
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-warning bg-gradient">
-                  <span class="info-box-icon"> <i class="bi bi-calendar3"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-calendar3"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Events</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -998,11 +1090,17 @@
              <!-- /.col -->
              <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box text-bg-danger bg-gradient">
-                  <span class="info-box-icon"> <i class="bi bi-chat-text-fill"></i> </span>
+                  <span class="info-box-icon">
+                    <i class="bi bi-chat-text-fill"></i>
+                  </span>
+
                  <div class="info-box-content">
                    <span class="info-box-text">Comments</span>
                    <span class="info-box-number">41,410</span>
-                    <div class="progress"><div class="progress-bar" style="width: 70%"></div></div>
+
+                    <div class="progress">
+                      <div class="progress-bar" style="width: 70%"></div>
+                    </div>
                    <span class="progress-description"> 70% Increase in 30 Days </span>
                  </div>
                  <!-- /.info-box-content -->
@@ -1062,7 +1160,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/dist/widgets/small-box.html
+++ b/dist/widgets/small-box.html
@@ -4,12 +4,14 @@
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AdminLTE 4 | Widgets - Small Box</title>
+
    <!--begin::Accessibility Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    <!--end::Accessibility Meta Tags-->
+
    <!--begin::Primary Meta Tags-->
    <meta name="title" content="AdminLTE 4 | Widgets - Small Box" />
    <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
      content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
    />
    <!--end::Primary Meta Tags-->
+
    <!--begin::Accessibility Features-->
    <!-- Skip links will be dynamically added by accessibility.js -->
    <meta name="supported-color-schemes" content="light dark" />
    <link rel="preload" href="../css/adminlte.css" as="style" />
    <!--end::Accessibility Features-->
+
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
@@ -37,6 +41,7 @@
      onload="this.media='all'"
    />
    <!--end::Fonts-->
+
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
@@ -44,6 +49,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
+
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
@@ -51,6 +57,7 @@
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
+
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="../css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
                <i class="bi bi-list"></i>
              </a>
            </li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
-            <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item d-none d-md-block">
+              <a href="#" class="nav-link">Contact</a>
+            </li>
          </ul>
          <!--end::Start Navbar Links-->
+
          <!--begin::End Navbar Links-->
          <ul class="navbar-nav ms-auto">
            <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
              </a>
            </li>
            <!--end::Navbar Search-->
+
            <!--begin::Messages Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
              </div>
            </li>
            <!--end::Messages Dropdown Menu-->
+
            <!--begin::Notifications Dropdown Menu-->
            <li class="nav-item dropdown">
              <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
              </div>
            </li>
            <!--end::Notifications Dropdown Menu-->
+
            <!--begin::Fullscreen Toggle-->
            <li class="nav-item">
              <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
              </a>
            </li>
            <!--end::Fullscreen Toggle-->
+
            <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu">
              <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@
                <li class="user-body">
                  <!--begin::Row-->
                  <div class="row">
-                    <div class="col-4 text-center"><a href="#">Followers</a></div>
-                    <div class="col-4 text-center"><a href="#">Sales</a></div>
-                    <div class="col-4 text-center"><a href="#">Friends</a></div>
+                    <div class="col-4 text-center">
+                      <a href="#">Followers</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Sales</a>
+                    </div>
+                    <div class="col-4 text-center">
+                      <a href="#">Friends</a>
+                    </div>
                  </div>
                  <!--end::Row-->
                </li>
@@ -490,6 +512,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">EXAMPLES</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
                  </li>
                </ul>
              </li>
+
              <li class="nav-header">DOCUMENTATIONS</li>
              <li class="nav-item">
                <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
                  <p>License</p>
                </a>
              </li>
+
              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
                  <p>Level 1</p>
                </a>
              </li>
+
              <li class="nav-header">LABELS</li>
              <li class="nav-item">
                <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
-              <div class="col-sm-6"><h3 class="mb-0">Small Box</h3></div>
+              <div class="col-sm-6">
+                <h3 class="mb-0">Small Box</h3>
+              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -762,6 +790,7 @@
                <div class="small-box text-bg-primary">
                  <div class="inner">
                    <h3>150</h3>
+
                    <p>New Orders</p>
                  </div>
                  <svg
@@ -789,6 +818,7 @@
                <div class="small-box text-bg-success">
                  <div class="inner">
                    <h3>53<sup class="fs-5">%</sup></h3>
+
                    <p>Bounce Rate</p>
                  </div>
                  <svg
@@ -816,6 +846,7 @@
                <div class="small-box text-bg-warning">
                  <div class="inner">
                    <h3>44</h3>
+
                    <p>User Registrations</p>
                  </div>
                  <svg
@@ -843,6 +874,7 @@
                <div class="small-box text-bg-danger">
                  <div class="inner">
                    <h3>65</h3>
+
                    <p>Unique Visitors</p>
                  </div>
                  <svg
@@ -924,7 +956,15 @@
      };
      document.addEventListener('DOMContentLoaded', function () {
        const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-        if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
+
+        // Disable OverlayScrollbars on mobile devices to prevent touch interference
+        const isMobile = window.innerWidth <= 992;
+
+        if (
+          sidebarWrapper &&
+          OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+          !isMobile
+        ) {
          OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
            scrollbars: {
              theme: Default.scrollbarTheme,
--- a/index.html
+++ b/index.html
@@ -7,6 +7,6 @@
  <meta name='viewport' content='width=device-width, initial-scale=1'>
 </head>
 <body>
-  <script>window.location.href = './dist/pages/index.html'</script>
+  <script>window.location.href = './dist/index.html'</script>
 </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "admin-lte",
-  "version": "4.0.0-rc3",
+  "version": "4.0.0-rc4",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "admin-lte",
-      "version": "4.0.0-rc3",
+      "version": "4.0.0-rc4",
      "license": "MIT",
      "devDependencies": {
        "@astrojs/check": "^0.9.4",
--- a/src/config/astro.config.mjs
+++ b/src/config/astro.config.mjs
@@ -8,6 +8,7 @@ export default defineConfig({
    // Example: Generate `page.html` instead of `page/index.html` during build.
    format: 'file'
  },
+  compressHTML: false,
  markdown: {
    shikiConfig: {
      theme: 'dark-plus'
--- a/src/html/components/_scripts.astro
+++ b/src/html/components/_scripts.astro
@@ -27,9 +27,14 @@ const Default = {
 }
 document.addEventListener("DOMContentLoaded", function () {
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
+  
+  // Disable OverlayScrollbars on mobile devices to prevent touch interference
+  const isMobile = window.innerWidth <= 992
+  
  if (
    sidebarWrapper &&
-      OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined
+    OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
+    !isMobile
  ) {
    OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
      scrollbars: {
--- a/src/html/components/javascript/pushmenu.mdx
+++ b/src/html/components/javascript/pushmenu.mdx
@@ -0,0 +1,17 @@
+The Pushmenu plugin is used to toggle the visibility of a sidebar menu. It allows users to collapse or expand the sidebar by clicking on a button or a link.
+
+##### Usage
+
+This plugin can be used as the data api.
+
+**Data API**
+
+Add `data-lte-toggle="sidebar"` to any button or link element to activate the plugin.
+
+```html
+<a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>
+```
+
+##### Example
+
+<a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>
--- a/src/html/pages/UI/general.astro
+++ b/src/html/pages/UI/general.astro
@@ -20,7 +20,7 @@ const pageTitle = "General UI Elements";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/UI/icons.astro
+++ b/src/html/pages/UI/icons.astro
@@ -19,7 +19,7 @@ const page = "icons";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/UI/timeline.astro
+++ b/src/html/pages/UI/timeline.astro
@@ -25,7 +25,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/browser-support.astro
+++ b/src/html/pages/docs/browser-support.astro
@@ -20,7 +20,7 @@ const page = "browser-support";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/color-mode.astro
+++ b/src/html/pages/docs/color-mode.astro
@@ -20,7 +20,7 @@ const page = "color-mode";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/components/main-header.astro
+++ b/src/html/pages/docs/components/main-header.astro
@@ -26,7 +26,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/components/main-sidebar.astro
+++ b/src/html/pages/docs/components/main-sidebar.astro
@@ -20,7 +20,7 @@ const page = "main-sidebar";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/faq.astro
+++ b/src/html/pages/docs/faq.astro
@@ -20,7 +20,7 @@ const page = "faq";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/how-to-contribute.astro
+++ b/src/html/pages/docs/how-to-contribute.astro
@@ -20,7 +20,7 @@ const page = "how-to-contribute";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/introduction.astro
+++ b/src/html/pages/docs/introduction.astro
@@ -20,7 +20,7 @@ const page = "introduction";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/javascript/pushmenu.astro
+++ b/src/html/pages/docs/javascript/pushmenu.astro
@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import Pushmenu from "@components/javascript/pushmenu.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Pushmenu Plugin | AdminLTE 4"
+const path = "../../../../dist"
+const mainPage = "javascript"
+const page = "pushmenu";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Pushmenu Plugin</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Pushmenu Plugin
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <Pushmenu />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>
--- a/src/html/pages/docs/javascript/treeview.astro
+++ b/src/html/pages/docs/javascript/treeview.astro
@@ -20,7 +20,7 @@ const page = "treeview";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/layout.astro
+++ b/src/html/pages/docs/layout.astro
@@ -19,7 +19,7 @@ const page = "layout";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/docs/license.astro
+++ b/src/html/pages/docs/license.astro
@@ -20,7 +20,7 @@ const page = "license";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/forms/general.astro
+++ b/src/html/pages/forms/general.astro
@@ -19,7 +19,7 @@ const page = "general";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/generate/theme.astro
+++ b/src/html/pages/generate/theme.astro
@@ -24,7 +24,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/index.astro
+++ b/src/html/pages/index.astro
@@ -41,7 +41,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/index2.astro
+++ b/src/html/pages/index2.astro
@@ -32,7 +32,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
    />
  </head>

-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/index3.astro
+++ b/src/html/pages/index3.astro
@@ -32,7 +32,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
    />
  </head>

-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/layout/fixed-complete.astro
+++ b/src/html/pages/layout/fixed-complete.astro
@@ -19,7 +19,7 @@ const page = "fixed-complete";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed fixed-header fixed-footer sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed fixed-header fixed-footer sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/layout/fixed-footer.astro
+++ b/src/html/pages/layout/fixed-footer.astro
@@ -19,7 +19,7 @@ const page = "fixed-footer";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="fixed-footer sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="fixed-footer sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/layout/fixed-header.astro
+++ b/src/html/pages/layout/fixed-header.astro
@@ -19,7 +19,7 @@ const page = "fixed-header";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="fixed-header sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="fixed-header sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/layout/fixed-sidebar.astro
+++ b/src/html/pages/layout/fixed-sidebar.astro
@@ -19,7 +19,7 @@ const page = "fixed-sidebar";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/layout/layout-custom-area.astro
+++ b/src/html/pages/layout/layout-custom-area.astro
@@ -19,7 +19,7 @@ const page = "layout-custom-area";
 </head>
 <!--end::Head-->
 <!--begin::Body-->
-<body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
 <!--begin::App Wrapper-->
 <div class="app-wrapper">
  <Topbar path={path}/>
--- a/src/html/pages/layout/layout-rtl.astro
+++ b/src/html/pages/layout/layout-rtl.astro
@@ -20,7 +20,7 @@ const isRtl = true;
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/layout/unfixed-sidebar.astro
+++ b/src/html/pages/layout/unfixed-sidebar.astro
@@ -19,7 +19,7 @@ const page = "unfixed-sidebar";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/tables/simple.astro
+++ b/src/html/pages/tables/simple.astro
@@ -19,7 +19,7 @@ const page = "simple";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/widgets/cards.astro
+++ b/src/html/pages/widgets/cards.astro
@@ -19,7 +19,7 @@ const page = "cards";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/widgets/info-box.astro
+++ b/src/html/pages/widgets/info-box.astro
@@ -19,7 +19,7 @@ const page = "info-box";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/pages/widgets/small-box.astro
+++ b/src/html/pages/widgets/small-box.astro
@@ -19,7 +19,7 @@ const page = "small-box";
  </head>
  <!--end::Head-->
  <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
--- a/src/html/public/js/adminlte.js
+++ b/src/html/public/js/adminlte.js
@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.0.0-rc3 (https://adminlte.io)
+ * AdminLTE v4.0.0-rc4 (https://adminlte.io)
 * Copyright 2014-2025 Colorlib <https://colorlib.com>
 * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
 */
@@ -641,8 +641,14 @@
            const sidebar = document.getElementsByClassName(sidebarExpand)[0];
            const sidebarContent = globalThis.getComputedStyle(sidebar, '::before').getPropertyValue('content');
            this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) };
+            // FIXED: Don't auto-collapse on mobile if sidebar is currently open
+            // This prevents resize events (triggered by scrolling) from closing the sidebar
+            const isCurrentlyOpen = document.body.classList.contains(CLASS_NAME_SIDEBAR_OPEN);
            if (window.innerWidth <= this._config.sidebarBreakpoint) {
-                this.collapse();
+                // Only collapse if not currently open (prevents scroll-triggered closes)
+                if (!isCurrentlyOpen) {
+                    this.collapse();
+                }
            }
            else {
                if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
@@ -682,20 +688,22 @@
        const sidebarOverlay = document.createElement('div');
        sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY;
        document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay);
-        let isTouchMoved = false;
+        let overlayTouchMoved = false;
+        // Handle touch events on overlay (area outside sidebar)
        sidebarOverlay.addEventListener('touchstart', () => {
-            isTouchMoved = false;
+            overlayTouchMoved = false;
        }, { passive: true });
        sidebarOverlay.addEventListener('touchmove', () => {
-            isTouchMoved = true;
+            overlayTouchMoved = true;
        }, { passive: true });
        sidebarOverlay.addEventListener('touchend', event => {
-            if (!isTouchMoved) {
+            if (!overlayTouchMoved) {
                event.preventDefault();
                const target = event.currentTarget;
                const data = new PushMenu(target, Defaults);
                data.collapse();
            }
+            overlayTouchMoved = false;
        }, { passive: false });
        sidebarOverlay.addEventListener('click', event => {
            event.preventDefault();
--- a/src/html/public/js/adminlte.js.map
+++ b/src/html/public/js/adminlte.js.map
--- a/src/html/public/js/adminlte.min.js
+++ b/src/html/public/js/adminlte.min.js
--- a/src/html/public/js/adminlte.min.js.map
+++ b/src/html/public/js/adminlte.min.js.map
--- a/src/ts/push-menu.ts
+++ b/src/ts/push-menu.ts
@@ -102,8 +102,15 @@ class PushMenu {
    const sidebarContent = globalThis.getComputedStyle(sidebar, '::before').getPropertyValue('content')
    this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) }

+    // FIXED: Don't auto-collapse on mobile if sidebar is currently open
+    // This prevents resize events (triggered by scrolling) from closing the sidebar
+    const isCurrentlyOpen = document.body.classList.contains(CLASS_NAME_SIDEBAR_OPEN)
+    
    if (window.innerWidth <= this._config.sidebarBreakpoint) {
-      this.collapse()
+      // Only collapse if not currently open (prevents scroll-triggered closes)
+      if (!isCurrentlyOpen) {
+        this.collapse()
+      }
    } else {
      if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
        this.expand()
@@ -150,24 +157,28 @@ onDOMContentLoaded(() => {
  sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
  document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)

-  let isTouchMoved = false
+  let overlayTouchMoved = false

+  // Handle touch events on overlay (area outside sidebar)
  sidebarOverlay.addEventListener('touchstart', () => {
-    isTouchMoved = false
+    overlayTouchMoved = false
  }, { passive: true })

  sidebarOverlay.addEventListener('touchmove', () => {
-    isTouchMoved = true
+    overlayTouchMoved = true
  }, { passive: true })

  sidebarOverlay.addEventListener('touchend', event => {
-    if (!isTouchMoved) {
+    if (!overlayTouchMoved) {
      event.preventDefault()
      const target = event.currentTarget as HTMLElement
      const data = new PushMenu(target, Defaults)
      data.collapse()
    }
+    overlayTouchMoved = false
  }, { passive: false })
+
+
  sidebarOverlay.addEventListener('click', event => {
    event.preventDefault()
    const target = event.currentTarget as HTMLElement
--- a/src/ts/treeview.ts
+++ b/src/ts/treeview.ts
@@ -24,7 +24,7 @@ const EVENT_KEY = `.${DATA_KEY}`

 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
-// const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`

 const CLASS_NAME_MENU_OPEN = 'menu-open'
 const SELECTOR_NAV_ITEM = '.nav-item'
@@ -112,6 +112,18 @@ class Treeview {
 */

 onDOMContentLoaded(() => {
+  const openMenuItems = document.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
+
+  openMenuItems.forEach(menuItem => {
+    const childElement = menuItem.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideDown(childElement, 0)
+
+      const event = new Event(EVENT_LOAD_DATA_API)
+      menuItem.dispatchEvent(event)
+    }
+  })
+
  const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)

  button.forEach(btn => {
Author	SHA1	Message	Date
Daniel	c4ddc07636	pushmenu doc added	2025-08-16 12:17:42 +05:30
Daniel	76b609f9f8	Update index.html	2025-08-16 12:15:08 +05:30
Daniel	798cb1fb3a	astro	2025-08-16 12:15:04 +05:30
Daniel	bfc58c11c1	added sponsor list in readme	2025-08-15 14:41:26 +05:30
Daniel	b17340cdf0	fix initial slideUp glitch in treeview	2025-08-04 14:58:53 +05:30
Aigars Silkalns	3001b30742	Merge pull request #5878 from danny007in/sidebar-mobile bug fix in default sidebar open mobile view	2025-07-24 21:50:23 +03:00
Daniel	dc7d4bd403	bug fix in default sidebar open mobile view	2025-07-22 20:36:25 +05:30
Aigars Silkalns	bebfccfd92	Fixed sidebar navigation on second scroll	2025-07-10 15:20:22 +03:00
Aigars Silkalns	ef1f2736c5	Updated readme	2025-07-10 12:25:03 +03:00