2025-06-30 20:13:11 +08:00
<!doctype html>
< html lang = "en" >
<!-- begin::Head -->
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title > Main Sidebar Component | AdminLTE 4< / title >
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- 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 -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Primary Meta Tags -->
< meta name = "title" content = "Main Sidebar Component | AdminLTE 4" / >
< meta name = "author" content = "ColorlibHQ" / >
< meta
name="description"
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
/>
< meta
name="keywords"
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 -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- 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 -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Fonts -->
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
media="print"
onload="this.media='all'"
/>
<!-- end::Fonts -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Third Party Plugin(OverlayScrollbars) -->
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
crossorigin="anonymous"
/>
<!-- end::Third Party Plugin(OverlayScrollbars) -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Third Party Plugin(Bootstrap Icons) -->
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
crossorigin="anonymous"
/>
<!-- end::Third Party Plugin(Bootstrap Icons) -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Required Plugin(AdminLTE) -->
< link rel = "stylesheet" href = "../../css/adminlte.css" / >
<!-- end::Required Plugin(AdminLTE) -->
< / head >
<!-- end::Head -->
<!-- begin::Body -->
< body class = "layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary" >
<!-- begin::App Wrapper -->
< div class = "app-wrapper" >
<!-- begin::Header -->
< nav class = "app-header navbar navbar-expand bg-body" >
<!-- begin::Container -->
< div class = "container-fluid" >
<!-- begin::Start Navbar Links -->
< ul class = "navbar-nav" >
< li class = "nav-item" >
< a class = "nav-link" data-lte-toggle = "sidebar" href = "#" role = "button" >
< i class = "bi bi-list" > < / i >
< / a >
< / li >
2025-07-10 20:20:22 +08:00
< 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 >
2025-06-30 20:13:11 +08:00
< / ul >
<!-- end::Start Navbar Links -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::End Navbar Links -->
< ul class = "navbar-nav ms-auto" >
<!-- begin::Navbar Search -->
< li class = "nav-item" >
< a class = "nav-link" data-widget = "navbar-search" href = "#" role = "button" >
< i class = "bi bi-search" > < / i >
< / a >
< / li >
<!-- end::Navbar Search -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Messages Dropdown Menu -->
< li class = "nav-item dropdown" >
< a class = "nav-link" data-bs-toggle = "dropdown" href = "#" >
< i class = "bi bi-chat-text" > < / i >
< span class = "navbar-badge badge text-bg-danger" > 3< / span >
< / a >
< div class = "dropdown-menu dropdown-menu-lg dropdown-menu-end" >
< a href = "#" class = "dropdown-item" >
<!-- begin::Message -->
< div class = "d-flex" >
< div class = "flex-shrink-0" >
< img
2025-07-10 17:11:37 +08:00
src="../../assets/img/user1-128x128.jpg"
2025-06-30 20:13:11 +08:00
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
< / div >
< div class = "flex-grow-1" >
< h3 class = "dropdown-item-title" >
Brad Diesel
< span class = "float-end fs-7 text-danger"
>< i class = "bi bi-star-fill" > < /i
>< / span >
< / h3 >
< p class = "fs-7" > Call me whenever you can...< / p >
< p class = "fs-7 text-secondary" >
< i class = "bi bi-clock-fill me-1" > < / i > 4 Hours Ago
< / p >
< / div >
< / div >
<!-- end::Message -->
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item" >
<!-- begin::Message -->
< div class = "d-flex" >
< div class = "flex-shrink-0" >
< img
2025-07-10 17:11:37 +08:00
src="../../assets/img/user8-128x128.jpg"
2025-06-30 20:13:11 +08:00
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
< / div >
< div class = "flex-grow-1" >
< h3 class = "dropdown-item-title" >
John Pierce
< span class = "float-end fs-7 text-secondary" >
< i class = "bi bi-star-fill" > < / i >
< / span >
< / h3 >
< p class = "fs-7" > I got your message bro< / p >
< p class = "fs-7 text-secondary" >
< i class = "bi bi-clock-fill me-1" > < / i > 4 Hours Ago
< / p >
< / div >
< / div >
<!-- end::Message -->
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item" >
<!-- begin::Message -->
< div class = "d-flex" >
< div class = "flex-shrink-0" >
< img
2025-07-10 17:11:37 +08:00
src="../../assets/img/user3-128x128.jpg"
2025-06-30 20:13:11 +08:00
alt="User Avatar"
class="img-size-50 rounded-circle me-3"
/>
< / div >
< div class = "flex-grow-1" >
< h3 class = "dropdown-item-title" >
Nora Silvester
< span class = "float-end fs-7 text-warning" >
< i class = "bi bi-star-fill" > < / i >
< / span >
< / h3 >
< p class = "fs-7" > The subject goes here< / p >
< p class = "fs-7 text-secondary" >
< i class = "bi bi-clock-fill me-1" > < / i > 4 Hours Ago
< / p >
< / div >
< / div >
<!-- end::Message -->
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item dropdown-footer" > See All Messages< / a >
< / div >
< / li >
<!-- end::Messages Dropdown Menu -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Notifications Dropdown Menu -->
< li class = "nav-item dropdown" >
< a class = "nav-link" data-bs-toggle = "dropdown" href = "#" >
< i class = "bi bi-bell-fill" > < / i >
< span class = "navbar-badge badge text-bg-warning" > 15< / span >
< / a >
< div class = "dropdown-menu dropdown-menu-lg dropdown-menu-end" >
< span class = "dropdown-item dropdown-header" > 15 Notifications< / span >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item" >
< i class = "bi bi-envelope me-2" > < / i > 4 new messages
< span class = "float-end text-secondary fs-7" > 3 mins< / span >
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item" >
< i class = "bi bi-people-fill me-2" > < / i > 8 friend requests
< span class = "float-end text-secondary fs-7" > 12 hours< / span >
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item" >
< i class = "bi bi-file-earmark-fill me-2" > < / i > 3 new reports
< span class = "float-end text-secondary fs-7" > 2 days< / span >
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item dropdown-footer" > See All Notifications < / a >
< / div >
< / li >
<!-- end::Notifications Dropdown Menu -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::Fullscreen Toggle -->
< li class = "nav-item" >
< a class = "nav-link" href = "#" data-lte-toggle = "fullscreen" >
< i data-lte-icon = "maximize" class = "bi bi-arrows-fullscreen" > < / i >
< i data-lte-icon = "minimize" class = "bi bi-fullscreen-exit" style = "display: none" > < / i >
< / a >
< / li >
<!-- end::Fullscreen Toggle -->
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
<!-- begin::User Menu Dropdown -->
< li class = "nav-item dropdown user-menu" >
< a href = "#" class = "nav-link dropdown-toggle" data-bs-toggle = "dropdown" >
< img
2025-07-10 17:11:37 +08:00
src="../../assets/img/user2-160x160.jpg"
2025-06-30 20:13:11 +08:00
class="user-image rounded-circle shadow"
alt="User Image"
/>
< span class = "d-none d-md-inline" > Alexander Pierce< / span >
< / a >
< ul class = "dropdown-menu dropdown-menu-lg dropdown-menu-end" >
<!-- begin::User Image -->
< li class = "user-header text-bg-primary" >
< img
2025-07-10 17:11:37 +08:00
src="../../assets/img/user2-160x160.jpg"
2025-06-30 20:13:11 +08:00
class="rounded-circle shadow"
alt="User Image"
/>
< p >
Alexander Pierce - Web Developer
< small > Member since Nov. 2023< / small >
< / p >
< / li >
<!-- end::User Image -->
<!-- begin::Menu Body -->
< li class = "user-body" >
<!-- begin::Row -->
< div class = "row" >
2025-07-10 20:20:22 +08:00
< 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 >
2025-06-30 20:13:11 +08:00
< / div >
<!-- end::Row -->
< / li >
<!-- end::Menu Body -->
<!-- begin::Menu Footer -->
< li class = "user-footer" >
< a href = "#" class = "btn btn-default btn-flat" > Profile< / a >
< a href = "#" class = "btn btn-default btn-flat float-end" > Sign out< / a >
< / li >
<!-- end::Menu Footer -->
< / ul >
< / li >
<!-- end::User Menu Dropdown -->
< / ul >
<!-- end::End Navbar Links -->
< / div >
<!-- end::Container -->
< / nav >
<!-- end::Header -->
<!-- begin::Sidebar -->
< aside class = "app-sidebar bg-body-secondary shadow" data-bs-theme = "dark" >
<!-- begin::Sidebar Brand -->
< div class = "sidebar-brand" >
<!-- begin::Brand Link -->
< a href = "../../index.html" class = "brand-link" >
<!-- begin::Brand Image -->
< img
2025-07-10 17:11:37 +08:00
src="../../assets/img/AdminLTELogo.png"
2025-06-30 20:13:11 +08:00
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!-- end::Brand Image -->
<!-- begin::Brand Text -->
< span class = "brand-text fw-light" > AdminLTE 4< / span >
<!-- end::Brand Text -->
< / a >
<!-- end::Brand Link -->
< / div >
<!-- end::Sidebar Brand -->
<!-- begin::Sidebar Wrapper -->
< div class = "sidebar-wrapper" >
< nav class = "mt-2" >
<!-- begin::Sidebar Menu -->
< ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="navigation"
aria-label="Main navigation"
data-accordion="false"
id="navigation"
>
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-speedometer" > < / i >
< p >
Dashboard
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../index.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Dashboard v1< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../index2.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Dashboard v2< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../index3.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Dashboard v3< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "../../generate/theme.html" class = "nav-link" >
< i class = "nav-icon bi bi-palette" > < / i >
< p > Theme Generate< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-box-seam-fill" > < / i >
< p >
Widgets
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../widgets/small-box.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Small Box< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../widgets/info-box.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > info Box< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../widgets/cards.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Cards< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-clipboard-fill" > < / i >
< p >
Layout Options
< span class = "nav-badge badge text-bg-secondary me-3" > 6< / span >
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../layout/unfixed-sidebar.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Default Sidebar< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/fixed-sidebar.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Fixed Sidebar< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/fixed-header.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Fixed Header< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/fixed-footer.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Fixed Footer< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/fixed-complete.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Fixed Complete< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/layout-custom-area.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Layout < small > + Custom Area < / small > < / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/sidebar-mini.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Sidebar Mini< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/collapsed-sidebar.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Sidebar Mini < small > + Collapsed< / small > < / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/logo-switch.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Sidebar Mini < small > + Logo Switch< / small > < / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../layout/layout-rtl.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Layout RTL< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-tree-fill" > < / i >
< p >
UI Elements
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../UI/general.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > General< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../UI/icons.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Icons< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../UI/timeline.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Timeline< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-pencil-square" > < / i >
< p >
Forms
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../forms/general.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > General Elements< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-table" > < / i >
< p >
Tables
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../tables/simple.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Simple Tables< / p >
< / a >
< / li >
< / ul >
< / li >
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
< li class = "nav-header" > EXAMPLES< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-box-arrow-in-right" > < / i >
< p >
Auth
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-box-arrow-in-right" > < / i >
< p >
Version 1
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../examples/login.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Login< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../examples/register.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Register< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-box-arrow-in-right" > < / i >
< p >
Version 2
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../examples/login-v2.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Login< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../examples/register-v2.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Register< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "../../examples/lockscreen.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Lockscreen< / p >
< / a >
< / li >
< / ul >
< / li >
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
< li class = "nav-header" > DOCUMENTATIONS< / li >
< li class = "nav-item" >
< a href = "../../docs/introduction.html" class = "nav-link" >
< i class = "nav-icon bi bi-download" > < / i >
< p > Installation< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../docs/layout.html" class = "nav-link" >
< i class = "nav-icon bi bi-grip-horizontal" > < / i >
< p > Layout< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../docs/color-mode.html" class = "nav-link" >
< i class = "nav-icon bi bi-star-half" > < / i >
< p > Color Mode< / p >
< / a >
< / li >
< li class = "nav-item menu-open" >
< a href = "#" class = "nav-link active" >
< i class = "nav-icon bi bi-ui-checks-grid" > < / i >
< p >
Components
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../docs/components/main-header.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Main Header< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../docs/components/main-sidebar.html" class = "nav-link active" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Main Sidebar< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-filetype-js" > < / i >
< p >
Javascript
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "../../docs/javascript/treeview.html" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Treeview< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "../../docs/browser-support.html" class = "nav-link" >
< i class = "nav-icon bi bi-browser-edge" > < / i >
< p > Browser Support< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../docs/how-to-contribute.html" class = "nav-link" >
< i class = "nav-icon bi bi-hand-thumbs-up-fill" > < / i >
< p > How To Contribute< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../docs/faq.html" class = "nav-link" >
< i class = "nav-icon bi bi-question-circle-fill" > < / i >
< p > FAQ< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "../../docs/license.html" class = "nav-link" >
< i class = "nav-icon bi bi-patch-check-fill" > < / i >
< p > License< / p >
< / a >
< / li >
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
< li class = "nav-header" > MULTI LEVEL EXAMPLE< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle-fill" > < / i >
< p > Level 1< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle-fill" > < / i >
< p >
Level 1
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Level 2< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p >
Level 2
< i class = "nav-arrow bi bi-chevron-right" > < / i >
< / p >
< / a >
< ul class = "nav nav-treeview" >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-record-circle-fill" > < / i >
< p > Level 3< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-record-circle-fill" > < / i >
< p > Level 3< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-record-circle-fill" > < / i >
< p > Level 3< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle" > < / i >
< p > Level 2< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle-fill" > < / i >
< p > Level 1< / p >
< / a >
< / li >
2025-07-10 20:20:22 +08:00
2025-06-30 20:13:11 +08:00
< li class = "nav-header" > LABELS< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle text-danger" > < / i >
< p class = "text" > Important< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle text-warning" > < / i >
< p > Warning< / p >
< / a >
< / li >
< li class = "nav-item" >
< a href = "#" class = "nav-link" >
< i class = "nav-icon bi bi-circle text-info" > < / i >
< p > Informational< / p >
< / a >
< / li >
< / ul >
<!-- end::Sidebar Menu -->
< / nav >
< / div >
<!-- end::Sidebar Wrapper -->
< / aside >
<!-- end::Sidebar -->
<!-- begin::App Main -->
< main class = "app-main" >
<!-- begin::App Content Header -->
< div class = "app-content-header" >
<!-- begin::Container -->
< div class = "container-fluid" >
<!-- begin::Row -->
< div class = "row" >
2025-07-10 20:20:22 +08:00
< div class = "col-sm-6" >
< h3 class = "mb-0" > Main Sidebar Component< / h3 >
< / div >
2025-06-30 20:13:11 +08:00
< div class = "col-sm-6" >
< ol class = "breadcrumb float-sm-end" >
< li class = "breadcrumb-item" > < a href = "#" > Docs< / a > < / li >
< li class = "breadcrumb-item active" aria-current = "page" > Main Sidebar Component< / li >
< / ol >
< / div >
< / div >
<!-- end::Row -->
< / div >
<!-- end::Container -->
< / div >
<!-- end::App Content Header -->
<!-- begin::App Content -->
< div class = "app-content" >
<!-- begin::Container -->
< div class = "container-fluid" >
< p >
The sidebar used in this page to the left provides an example of what your sidebar
would look like. Construction of a sidebar:
< / p >
< pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="html"
>< code > < span class = "line" > < span style = "color:#6A9955" > < !--begin::Sidebar--> < / span > < / span >
2025-06-24 13:16:49 +08:00
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > aside< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " app-sidebar bg-body-secondary shadow" < / span > < span style = "color:#9CDCFE" > data-bs-theme< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dark" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Sidebar Brand--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " sidebar-brand" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Brand Link--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " brand-link" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Brand Image--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > img< / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > src< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./assets/img/AdminLTELogo.png" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " AdminLTE Logo" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " brand-image opacity-75 shadow" < / span > < / span >
< span class = "line" > < span style = "color:#808080" > /> < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Brand Image--> < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Brand Text--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > span< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " brand-text fw-light" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > AdminLTE 4< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > span< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Brand Text--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Brand Link--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Sidebar Brand--> < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Sidebar Wrapper--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " sidebar-wrapper" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > nav< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " mt-2" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Sidebar Menu--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > ul< / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav sidebar-menu flex-column" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > data-lte-toggle< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " treeview" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > role< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " menu" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > data-accordion< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " false" < / span > < / span >
< span class = "line" > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-header" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Nav Header< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle-fill" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Level 1< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " #" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle-fill" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > Treeview< / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-arrow bi bi-chevron-right" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > ul< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav nav-treeview" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > Level 2 (Badge)< / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > span< / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-badge badge text-bg-secondary me-3" < / span > < / span >
< span class = "line" > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > 6< / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > span< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Level 2< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > ul< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link active" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle-fill" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Level 1 Active< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item menu-open" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " #" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link active" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle-fill" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > Treeview Menu Open< / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-arrow bi bi-chevron-right" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > ul< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav nav-treeview" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link active" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Level 2 Active< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-icon bi bi-circle" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Level 2< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > ul< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > ul< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Sidebar Menu--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > nav< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Sidebar Wrapper--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > aside< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Sidebar--> < / span > < / span > < / code > < / pre >
2025-06-30 20:13:11 +08:00
< h2 id = "alternate-logo" > Alternate Logo< / h2 >
< p >
You can use two logo images instead of logo with text, you only need to change the
markup to this:
< / p >
< pre
class="astro-code dark-plus"
style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
tabindex="0"
data-language="html"
>< code > < span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " sidebar-brand" < / span > < span style = "color:#808080" > > < / span > < / span >
2025-06-24 13:16:49 +08:00
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./index.html" < / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " brand-link logo-switch" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > img< / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > src< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./assets/img/AdminLTELogo.png" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " AdminLTE Logo Small" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " brand-image-xl logo-xs opacity-75 shadow" < / span > < / span >
< span class = "line" > < span style = "color:#808080" > /> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > img< / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > src< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " ./assets/img/AdminLTEFullLogo.png" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " AdminLTE Logo Large" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " brand-image-xs logo-xl opacity-75" < / span > < / span >
< span class = "line" > < span style = "color:#808080" > /> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > a< / span > < span style = "color:#808080" > > < / span > < / span >
2025-06-30 20:13:11 +08:00
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#808080" > > < / span > < / span > < / code > < / pre >
< / div >
<!-- end::Container -->
< / div >
<!-- end::App Content -->
< / main >
<!-- end::App Main -->
<!-- begin::Footer -->
< footer class = "app-footer" >
<!-- begin::To the end -->
< div class = "float-end d-none d-sm-inline" > Anything you want< / div >
<!-- end::To the end -->
<!-- begin::Copyright -->
< strong >
Copyright © 2014-2025
< a href = "https://adminlte.io" class = "text-decoration-none" > AdminLTE.io< / a > .
< / strong >
All rights reserved.
<!-- end::Copyright -->
< / footer >
<!-- end::Footer -->
< / div >
<!-- end::App Wrapper -->
<!-- begin::Script -->
<!-- begin::Third Party Plugin(OverlayScrollbars) -->
< script
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
crossorigin="anonymous"
>< / script >
<!-- end::Third Party Plugin(OverlayScrollbars) --> <!-- begin::Required Plugin(popperjs for Bootstrap 5) -->
< script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
crossorigin="anonymous"
>< / script >
<!-- end::Required Plugin(popperjs for Bootstrap 5) --> <!-- begin::Required Plugin(Bootstrap 5) -->
< script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
crossorigin="anonymous"
>< / script >
<!-- end::Required Plugin(Bootstrap 5) --> <!-- begin::Required Plugin(AdminLTE) -->
< script src = "../../js/adminlte.js" > < / script >
<!-- end::Required Plugin(AdminLTE) --> <!-- begin::OverlayScrollbars Configure -->
< script >
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave',
scrollbarClickScroll: true,
};
document.addEventListener('DOMContentLoaded', function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
2025-07-10 20:20:22 +08:00
// Disable OverlayScrollbars on mobile devices to prevent touch interference
const isMobile = window.innerWidth < = 992;
if (
sidebarWrapper & &
OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined & &
!isMobile
) {
2025-06-30 20:13:11 +08:00
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
< / script >
2025-07-10 17:11:37 +08:00
<!-- end::OverlayScrollbars Configure -->
2025-06-30 20:13:11 +08:00
<!-- end::Script -->
< / body >
<!-- end::Body -->
< / html >
