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

79
dist/forms/general.html vendored
View File

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