Fixed sidebar navigation on second scroll
This commit is contained in:
Aigars Silkalns
parent
ef1f2736c5
commit
bebfccfd92
|
|
@ -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">«</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">»</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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
(() => {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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="#">«</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="#">»</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">«</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="#">»</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="#">«</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="#">»</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">«</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="#">»</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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue