2024-12-24 15:49:11 +08:00
<!doctype html>
< html lang = "en" >
<!-- begin::Head -->
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title > Main Header Component | AdminLTE 4< / title >
2025-06-20 21:52:49 +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 -->
2024-12-24 15:49:11 +08:00
<!-- begin::Primary Meta Tags -->
< meta name = "title" content = "Main Header Component | AdminLTE 4" / >
< meta name = "author" content = "ColorlibHQ" / >
< meta
name="description"
2025-06-20 21:52:49 +08:00
content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
2024-12-24 15:49:11 +08:00
/>
< meta
name="keywords"
2025-06-20 21:52:49 +08:00
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"
2024-12-24 15:49:11 +08:00
/>
<!-- end::Primary Meta Tags -->
2025-06-20 21:52:49 +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 = "../../../../dist/css/adminlte.css" as = "style" / >
<!-- end::Accessibility Features -->
2024-12-24 15:49: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"
2025-06-20 21:52:49 +08:00
media="print"
onload="this.media='all'"
2024-12-24 15:49:11 +08:00
/>
<!-- end::Fonts -->
<!-- begin::Third Party Plugin(OverlayScrollbars) -->
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
crossorigin="anonymous"
/>
<!-- end::Third Party Plugin(OverlayScrollbars) -->
<!-- begin::Third Party Plugin(Bootstrap Icons) -->
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
crossorigin="anonymous"
/>
<!-- end::Third Party Plugin(Bootstrap Icons) -->
<!-- begin::Required Plugin(AdminLTE) -->
< link rel = "stylesheet" href = "../../../../dist/css/adminlte.css" / >
<!-- end::Required Plugin(AdminLTE) -->
< / head >
<!-- end::Head -->
<!-- begin::Body -->
< body class = "layout-fixed sidebar-expand-lg 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 >
< 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 -->
< 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 -->
<!-- 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
src="../../../../dist/assets/img/user1-128x128.jpg"
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
src="../../../../dist/assets/img/user8-128x128.jpg"
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
src="../../../../dist/assets/img/user3-128x128.jpg"
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 -->
<!-- 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 -->
<!-- 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 -->
<!-- begin::User Menu Dropdown -->
< li class = "nav-item dropdown user-menu" >
< a href = "#" class = "nav-link dropdown-toggle" data-bs-toggle = "dropdown" >
< img
src="../../../../dist/assets/img/user2-160x160.jpg"
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
src="../../../../dist/assets/img/user2-160x160.jpg"
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" >
< 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 >
<!-- 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
src="../../../../dist/assets/img/AdminLTELogo.png"
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"
2025-06-20 21:52:49 +08:00
role="navigation"
aria-label="Main navigation"
2024-12-24 15:49:11 +08:00
data-accordion="false"
2025-06-20 21:52:49 +08:00
id="navigation"
2024-12-24 15:49:11 +08:00
>
< 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 >
2025-06-20 20:53:40 +08:00
< 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 >
2024-12-24 15:49:11 +08:00
< 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 >
< 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 >
< 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 active" >
< 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" >
< 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 >
< 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 >
< 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" >
< 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 >
< li class = "breadcrumb-item active" aria-current = "page" > Main Header 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" >
< div class = "callout callout-warning mb-4" >
< h5 class = "fw-bold" > Reminder!< / h5 >
< p >
AdminLTE uses all of Bootstrap 5 components. It's a good start to review the
< a
href="https://getbootstrap.com/"
target="_blank"
rel="noopener noreferrer"
class="callout-link"
>
Bootstrap documentation
< / a >
to get an idea of the various components that this documentation
< b > does not< / b > cover.
< / p >
< / div >
< div class = "callout callout-info mb-4" >
< h5 class = "fw-bold" > Tips!< / h5 >
< p >
If you go through the example pages and would like to copy a component, right-click
on the component and choose “inspect element” to get to the HTML quicker than
scanning the HTML page.
< / p >
< / div >
<!-- Navbar -->
< nav class = "navbar navbar-expand bg-body" >
<!-- begin::Container -->
< div class = "container-fluid" >
<!-- 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 >
< 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" >
< a class = "nav-link" data-widget = "navbar-search" href = "#" role = "button" >
< 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 = "#" >
< 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" >
<!-- Message Start -->
< div class = "d-flex" >
< div class = "flex-shrink-0" >
< img
src="../../../../dist/assets/img/user1-128x128.jpg"
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 >
<!-- Message End -->
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item" >
<!-- Message Start -->
< div class = "d-flex" >
< div class = "flex-shrink-0" >
< img
src="../../../../dist/assets/img/user8-128x128.jpg"
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 >
<!-- Message End -->
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item" >
<!-- Message Start -->
< div class = "d-flex" >
< div class = "flex-shrink-0" >
< img
src="../../../../dist/assets/img/user3-128x128.jpg"
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 >
<!-- Message End -->
< / a >
< div class = "dropdown-divider" > < / div >
< a href = "#" class = "dropdown-item dropdown-footer" > See All Messages < / a >
< / div >
< / li >
<!-- 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 >
< li class = "nav-item dropdown user-menu" >
< a href = "#" class = "nav-link dropdown-toggle" data-bs-toggle = "dropdown" >
< img
src="../../../../dist/assets/img/user2-160x160.jpg"
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" >
<!-- User image -->
< li class = "user-header text-bg-primary" >
< img
src="../../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
< p >
Alexander Pierce - Web Developer
< small > Member since Nov. 2023< / small >
< / p >
< / li >
<!-- Menu Body -->
< 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 >
<!-- end::Row -->
< / li >
<!-- 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 >
< / ul >
< / li >
< / ul >
< / div >
<!-- end::Container -->
< / nav >
<!-- /.navbar -->
< 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" > < !-- Navbar --> < / 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" > " app-header navbar navbar-expand bg-body" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Container--> < / 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" > " container-fluid" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !-- Start navbar links --> < / 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" > " navbar-nav" < / 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" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#9CDCFE" > data-lte-toggle< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " sidebar" < / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " #" < / span > < span style = "color:#9CDCFE" > role< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " button" < / 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" > " bi bi-list" < / 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" > 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 d-none d-md-block" < / 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 style = "color:#D4D4D4" > Home< / span > < 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 d-none d-md-block" < / 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 style = "color:#D4D4D4" > Contact< / span > < 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:#6A9955" > < !-- End navbar links --> < / span > < / span >
< span class = "line" > < / 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" > " navbar-nav ms-auto" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !-- Navbar Search --> < / 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" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#9CDCFE" > data-widget< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " navbar-search" < / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " #" < / span > < span style = "color:#9CDCFE" > role< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " button" < / 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" > " bi bi-search" < / 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" > 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:#6A9955" > < !-- Messages Dropdown Menu --> < / 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 dropdown" < / 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" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#9CDCFE" > data-bs-toggle< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown" < / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " #" < / 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" > " bi bi-chat-text" < / 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" > span< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " navbar-badge badge text-bg-danger" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 3< / span > < 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" > a< / span > < span style = "color:#808080" > > < / 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" > " dropdown-menu dropdown-menu-lg dropdown-menu-end" < / 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" > " dropdown-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !-- Message Start --> < / 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" > " d-flex" < / span > < span style = "color:#808080" > > < / 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" > " flex-shrink-0" < / 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" > " ../../../dist/assets/img/user1-128x128.jpg" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " User Avatar" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " img-size-50 rounded-circle me-3" < / span > < / span >
< span class = "line" > < 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:#808080" > < < / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " flex-grow-1" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > h3< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown-item-title" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > Brad Diesel< / 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" > " float-end fs-7 text-danger" < / 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" > " bi bi-star-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" > span< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > h3< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " fs-7" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Call me whenever you can...< / 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" > p< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " fs-7 text-secondary" < / 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" > " bi bi-clock-fill me-1" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 4 Hours Ago< / 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" > div< / 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" > < !-- Message End --> < / 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" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown-divider" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > div< / 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" > " dropdown-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !-- Message Start --> < / 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" > " d-flex" < / span > < span style = "color:#808080" > > < / 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" > " flex-shrink-0" < / 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" > " ../../../dist/assets/img/user8-128x128.jpg" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " User Avatar" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " img-size-50 rounded-circle me-3" < / span > < / span >
< span class = "line" > < 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:#808080" > < < / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " flex-grow-1" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > h3< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown-item-title" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > John Pierce< / 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" > " float-end fs-7 text-secondary" < / 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" > " bi bi-star-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" > span< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > h3< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " fs-7" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > I got your message bro< / 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" > p< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " fs-7 text-secondary" < / 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" > " bi bi-clock-fill me-1" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 4 Hours Ago< / 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" > div< / 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" > < !-- Message End --> < / 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" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown-divider" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > div< / 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" > " dropdown-item" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !-- Message Start --> < / 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" > " d-flex" < / span > < span style = "color:#808080" > > < / 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" > " flex-shrink-0" < / 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" > " ../../../dist/assets/img/user3-128x128.jpg" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " User Avatar" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " img-size-50 rounded-circle me-3" < / span > < / span >
< span class = "line" > < 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:#808080" > < < / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " flex-grow-1" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > h3< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown-item-title" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > Nora Silvester< / 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" > " float-end fs-7 text-warning" < / 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" > " bi bi-star-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" > span< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > h3< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > p< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " fs-7" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > The subject goes here< / 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" > p< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " fs-7 text-secondary" < / 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" > " bi bi-clock-fill me-1" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 4 Hours Ago< / 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" > div< / 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" > < !-- Message End --> < / 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" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown-divider" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > div< / 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" > " dropdown-item dropdown-footer" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > See All Messages< / span > < 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" > div< / 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:#6A9955" > < !-- Notifications Dropdown Menu --> < / 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 dropdown" < / 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" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " nav-link" < / span > < span style = "color:#9CDCFE" > data-bs-toggle< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown" < / span > < span style = "color:#9CDCFE" > href< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " #" < / 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" > " bi bi-bell-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" > span< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " navbar-badge badge text-bg-warning" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 15< / span > < 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" > a< / span > < span style = "color:#808080" > > < / 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" > " dropdown-menu dropdown-menu-lg dropdown-menu-end" < / span > < span style = "color:#808080" > > < / 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" > " dropdown-item dropdown-header" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 15 Notifications< / span > < 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" > div< / span > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown-divider" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > div< / 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" > " dropdown-item" < / 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" > " bi bi-envelope me-2" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 4 new messages< / 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" > " float-end text-secondary fs-7" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 3 mins< / span > < 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" > a< / span > < span style = "color:#808080" > > < / 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" > " dropdown-divider" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > div< / 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" > " dropdown-item" < / 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" > " bi bi-people-fill me-2" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 8 friend requests< / 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" > " float-end text-secondary fs-7" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 12 hours< / span > < 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" > a< / span > < span style = "color:#808080" > > < / 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" > " dropdown-divider" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > div< / 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" > " dropdown-item" < / 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" > " bi bi-file-earmark-fill me-2" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > i< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 3 new reports< / 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" > " float-end text-secondary fs-7" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > 2 days< / span > < 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" > a< / span > < span style = "color:#808080" > > < / 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" > " dropdown-divider" < / span > < span style = "color:#808080" > > < /< / span > < span style = "color:#569CD6" > div< / 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" > " dropdown-item dropdown-footer" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#D4D4D4" > See All Notifications< / 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" > div< / 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 dropdown user-menu" < / 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 dropdown-toggle" < / span > < span style = "color:#9CDCFE" > data-bs-toggle< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " dropdown" < / 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" > " ../../../dist/assets/img/user2-160x160.jpg" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " user-image rounded-circle shadow" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " User Image" < / span > < / span >
< span class = "line" > < span style = "color:#808080" > /> < / 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" > " d-none d-md-inline" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Alexander Pierce< / span > < 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" > 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" > " dropdown-menu dropdown-menu-lg dropdown-menu-end" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !-- User image --> < / 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" > " user-header text-bg-primary" < / 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" > " ../../../dist/assets/img/user2-160x160.jpg" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > class< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " rounded-circle shadow" < / span > < / span >
< span class = "line" > < span style = "color:#9CDCFE" > alt< / span > < span style = "color:#D4D4D4" > =< / span > < span style = "color:#CE9178" > " User Image" < / span > < / span >
< span class = "line" > < span style = "color:#808080" > /> < / span > < / span >
< span class = "line" > < / 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" > Alexander Pierce - Web Developer< / span > < / span >
< span class = "line" > < span style = "color:#808080" > < < / span > < span style = "color:#569CD6" > small< / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Member since Nov. 2023< / span > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > small< / 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" > li< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !-- Menu Body --> < / 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" > " user-body" < / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--begin::Row--> < / 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" > " row" < / span > < span style = "color:#808080" > > < / 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" > " col-4 text-center" < / 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:#808080" > > < / span > < span style = "color:#D4D4D4" > Followers< / span > < 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" > div< / span > < span style = "color:#808080" > > < / 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" > " col-4 text-center" < / 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:#808080" > > < / span > < span style = "color:#D4D4D4" > Sales< / span > < 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" > div< / span > < span style = "color:#808080" > > < / 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" > " col-4 text-center" < / 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:#808080" > > < / span > < span style = "color:#D4D4D4" > Friends< / span > < 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" > div< / 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::Row--> < / 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:#6A9955" > < !-- Menu Footer--> < / 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" > " user-footer" < / 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" > " btn btn-default btn-flat" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Profile< / span > < 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" > 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" > " btn btn-default btn-flat float-end" < / span > < span style = "color:#808080" > > < / span > < span style = "color:#D4D4D4" > Sign out< / span > < 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:#808080" > < /< / span > < span style = "color:#569CD6" > div< / span > < span style = "color:#808080" > > < / span > < / span >
< span class = "line" > < span style = "color:#6A9955" > < !--end::Container--> < / span > < / span >
< span class = "line" > < span style = "color:#808080" > < /< / span > < span style = "color:#569CD6" > nav< / span > < span style = "color:#808080" > > < / span > < / span >
2025-06-20 20:53:40 +08:00
< span class = "line" > < span style = "color:#6A9955" > < !-- /.navbar --> < / span > < / span > < / code > < / pre >
2024-12-24 15:49:11 +08:00
< / 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 >
2025-06-20 20:53:40 +08:00
Copyright © 2014-2025
2024-12-24 15:49:11 +08:00
< 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.10.1/browser/overlayscrollbars.browser.es6.min.js"
integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
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"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
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.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
>< / script >
<!-- end::Required Plugin(Bootstrap 5) --> <!-- begin::Required Plugin(AdminLTE) -->
< script src = "../../../../dist/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-06-20 20:53:40 +08:00
if (sidebarWrapper & & OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
2024-12-24 15:49:11 +08:00
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
scrollbars: {
theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide,
clickScroll: Default.scrollbarClickScroll,
},
});
}
});
< / script >
<!-- end::OverlayScrollbars Configure -->
<!-- end::Script -->
< / body >
<!-- end::Body -->
< / html >
