lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed sidebar navigation on second scroll

Browse Source
This commit is contained in:
Aigars Silkalns
2025-07-10 15:20:22 +03:00
parent ef1f2736c5
commit bebfccfd92
48 changed files with 2206 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
dist/examples/lockscreen.html vendored
View File

@@ -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,

33
dist/examples/login-v2.html vendored
View File

@@ -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,

33
dist/examples/login.html vendored
View File

@@ -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,

33
dist/examples/register-v2.html vendored
View File

@@ -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,

33
dist/examples/register.html vendored
View File

@@ -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,