Skip to content

Commit bebfccf

Browse files
puikinshpuikinsh
committed
Fixed sidebar navigation on second scroll
1 parent ef1f273 commit bebfccf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2206
-425
lines changed

‎dist/UI/general.html‎

Lines changed: 215 additions & 66 deletions
Large diffs are not rendered by default.

‎dist/UI/icons.html‎

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
<head>
55
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
66
<title>AdminLTE 4 | Icons</title>
7+
78
<!--begin::Accessibility Meta Tags-->
89
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
910
<meta name="color-scheme" content="light dark" />
1011
<meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
1112
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
1213
<!--end::Accessibility Meta Tags-->
14+
1315
<!--begin::Primary Meta Tags-->
1416
<meta name="title" content="AdminLTE 4 | Icons" />
1517
<meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
2224
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"
2325
/>
2426
<!--end::Primary Meta Tags-->
27+
2528
<!--begin::Accessibility Features-->
2629
<!-- Skip links will be dynamically added by accessibility.js -->
2730
<meta name="supported-color-schemes" content="light dark" />
2831
<link rel="preload" href="../css/adminlte.css" as="style" />
2932
<!--end::Accessibility Features-->
33+
3034
<!--begin::Fonts-->
3135
<link
3236
rel="stylesheet"
@@ -37,20 +41,23 @@
3741
onload="this.media='all'"
3842
/>
3943
<!--end::Fonts-->
44+
4045
<!--begin::Third Party Plugin(OverlayScrollbars)-->
4146
<link
4247
rel="stylesheet"
4348
href="https://cdn.jsdelivr.net/npm/[email protected]/styles/overlayscrollbars.min.css"
4449
crossorigin="anonymous"
4550
/>
4651
<!--end::Third Party Plugin(OverlayScrollbars)-->
52+
4753
<!--begin::Third Party Plugin(Bootstrap Icons)-->
4854
<link
4955
rel="stylesheet"
5056
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
5157
crossorigin="anonymous"
5258
/>
5359
<!--end::Third Party Plugin(Bootstrap Icons)-->
60+
5461
<!--begin::Required Plugin(AdminLTE)-->
5562
<link rel="stylesheet" href="../css/adminlte.css" />
5663
<!--end::Required Plugin(AdminLTE)-->
@@ -71,10 +78,15 @@
7178
<i class="bi bi-list"></i>
7279
</a>
7380
</li>
74-
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
75-
<li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
81+
<li class="nav-item d-none d-md-block">
82+
<a href="#" class="nav-link">Home</a>
83+
</li>
84+
<li class="nav-item d-none d-md-block">
85+
<a href="#" class="nav-link">Contact</a>
86+
</li>
7687
</ul>
7788
<!--end::Start Navbar Links-->
89+
7890
<!--begin::End Navbar Links-->
7991
<ul class="navbar-nav ms-auto">
8092
<!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
8496
</a>
8597
</li>
8698
<!--end::Navbar Search-->
99+
87100
<!--begin::Messages Dropdown Menu-->
88101
<li class="nav-item dropdown">
89102
<a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@ <h3 class="dropdown-item-title">
173186
</div>
174187
</li>
175188
<!--end::Messages Dropdown Menu-->
189+
176190
<!--begin::Notifications Dropdown Menu-->
177191
<li class="nav-item dropdown">
178192
<a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@ <h3 class="dropdown-item-title">
201215
</div>
202216
</li>
203217
<!--end::Notifications Dropdown Menu-->
218+
204219
<!--begin::Fullscreen Toggle-->
205220
<li class="nav-item">
206221
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@ <h3 class="dropdown-item-title">
209224
</a>
210225
</li>
211226
<!--end::Fullscreen Toggle-->
227+
212228
<!--begin::User Menu Dropdown-->
213229
<li class="nav-item dropdown user-menu">
214230
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,9 +253,15 @@ <h3 class="dropdown-item-title">
237253
<li class="user-body">
238254
<!--begin::Row-->
239255
<div class="row">
240-
<div class="col-4 text-center"><a href="#">Followers</a></div>
241-
<div class="col-4 text-center"><a href="#">Sales</a></div>
242-
<div class="col-4 text-center"><a href="#">Friends</a></div>
256+
<div class="col-4 text-center">
257+
<a href="#">Followers</a>
258+
</div>
259+
<div class="col-4 text-center">
260+
<a href="#">Sales</a>
261+
</div>
262+
<div class="col-4 text-center">
263+
<a href="#">Friends</a>
264+
</div>
243265
</div>
244266
<!--end::Row-->
245267
</li>
@@ -490,6 +512,7 @@ <h3 class="dropdown-item-title">
490512
</li>
491513
</ul>
492514
</li>
515+
493516
<li class="nav-header">EXAMPLES</li>
494517
<li class="nav-item">
495518
<a href="#" class="nav-link">
@@ -554,6 +577,7 @@ <h3 class="dropdown-item-title">
554577
</li>
555578
</ul>
556579
</li>
580+
557581
<li class="nav-header">DOCUMENTATIONS</li>
558582
<li class="nav-item">
559583
<a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@ <h3 class="dropdown-item-title">
637661
<p>License</p>
638662
</a>
639663
</li>
664+
640665
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
641666
<li class="nav-item">
642667
<a href="#" class="nav-link">
@@ -702,6 +727,7 @@ <h3 class="dropdown-item-title">
702727
<p>Level 1</p>
703728
</a>
704729
</li>
730+
705731
<li class="nav-header">LABELS</li>
706732
<li class="nav-item">
707733
<a href="#" class="nav-link">
@@ -736,7 +762,9 @@ <h3 class="dropdown-item-title">
736762
<div class="container-fluid">
737763
<!--begin::Row-->
738764
<div class="row">
739-
<div class="col-sm-6"><h3 class="mb-0">Icons</h3></div>
765+
<div class="col-sm-6">
766+
<h3 class="mb-0">Icons</h3>
767+
</div>
740768
<div class="col-sm-6">
741769
<ol class="breadcrumb float-sm-end">
742770
<li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -759,7 +787,9 @@ <h3 class="dropdown-item-title">
759787
<!-- The icons -->
760788
<div class="col-12">
761789
<div class="card card-primary card-outline">
762-
<div class="card-header"><h3 class="card-title">Icons</h3></div>
790+
<div class="card-header">
791+
<h3 class="card-title">Icons</h3>
792+
</div>
763793
<div class="card-body">
764794
<p>You can use any font library you like with AdminLTE 4.</p>
765795
<strong>Recommendations</strong>
@@ -827,7 +857,15 @@ <h3 class="dropdown-item-title">
827857
};
828858
document.addEventListener('DOMContentLoaded', function () {
829859
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
830-
if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
860+
861+
// Disable OverlayScrollbars on mobile devices to prevent touch interference
862+
const isMobile = window.innerWidth <= 992;
863+
864+
if (
865+
sidebarWrapper &&
866+
OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
867+
!isMobile
868+
) {
831869
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
832870
scrollbars: {
833871
theme: Default.scrollbarTheme,

0 commit comments

Comments
 (0)