npm - admin-lte - Versions diffs - 4.0.0-alpha1 → 4.0.0-alpha2 - Mend

admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/.bundlewatch.config.json +2 -2
package/.cache/.eslintcache +1 -0
package/.cache/.stylelintcache +1 -0
package/.eslintignore +1 -0
package/.eslintrc.json +16 -0
package/.stylelintrc.json +47 -0
package/LICENSE +1 -1
package/README.md +5 -6
package/dist/css/adminlte.css +2383 -2754
package/dist/css/adminlte.css.map +1 -1
package/dist/css/adminlte.min.css +2 -2
package/dist/css/adminlte.min.css.map +1 -1
package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2377 -2749
package/dist/css/adminlte.rtl.css.map +1 -0
package/dist/css/adminlte.rtl.min.css +7 -0
package/dist/css/adminlte.rtl.min.css.map +1 -0
package/dist/js/adminlte.js +173 -182
package/dist/js/adminlte.js.map +1 -1
package/dist/js/adminlte.min.js +6 -1
package/dist/js/adminlte.min.js.map +1 -1
package/dist/pages/UI/timeline.html +698 -0
package/dist/pages/docs/browser-support.html +614 -0
package/dist/pages/docs/color-mode.html +855 -0
package/dist/pages/docs/components/main-header.html +926 -0
package/dist/pages/docs/layout.html +617 -0
package/dist/pages/docs.html +617 -0
package/dist/pages/examples/login.html +114 -187
package/dist/pages/examples/register.html +117 -190
package/dist/pages/forms/general.html +598 -647
package/dist/pages/index.html +1091 -0
package/dist/pages/index2.html +1452 -0
package/dist/pages/index3.html +950 -0
package/dist/pages/layout/fixed-sidebar.html +590 -638
package/dist/pages/layout/layout-rtl.html +623 -0
package/dist/pages/layout/sidebar-mini.html +623 -0
package/dist/pages/layout/unfixed-sidebar.html +589 -638
package/dist/pages/tables/simple.html +837 -938
package/dist/pages/widgets/cards.html +814 -698
package/dist/pages/widgets/info-box.html +864 -951
package/dist/pages/widgets/small-box.html +625 -678
package/index.html +1 -6
package/package.json +53 -36
package/src/config/assets.config.mjs +8 -0
package/src/config/astro.config.mjs +17 -0
package/src/config/postcss.config.mjs +15 -0
package/src/config/rollup.config.js +20 -0
package/src/html/.eslintrc.json +24 -0
package/src/html/.tsconfig.json +4 -0
package/src/html/components/_head.astro +31 -0
package/src/html/components/_scripts.astro +40 -0
package/src/html/components/dashboard/_footer.astro +12 -0
package/src/html/components/dashboard/_sidenav.astro +323 -0
package/src/{partials/dashboard/_topbar.html → html/components/dashboard/_topbar.astro} +20 -46
package/src/html/components/docs/browser-support/index.md +22 -0
package/src/html/components/docs/color-mode/navbar-html.md +80 -0
package/src/{partials/_scripts.html → html/components/docs/color-mode/toggle-script.md} +5 -52
package/src/html/components/docs/components/main-header-1.md +159 -0
package/src/html/components/docs/introduction/index.md +35 -0
package/src/html/env.d.ts +1 -0
package/src/html/pages/UI/timeline.astro +158 -0
package/src/html/pages/docs/browser-support.astro +58 -0
package/src/html/pages/docs/color-mode.astro +224 -0
package/src/html/pages/docs/components/main-header.astro +232 -0
package/src/html/pages/docs/index.astro +58 -0
package/src/html/pages/docs/layout.astro +77 -0
package/src/{pages/examples/login.html → html/pages/examples/login.astro} +13 -13
package/src/{pages/examples/register.html → html/pages/examples/register.astro} +13 -13
package/src/{pages/forms/general.html → html/pages/forms/general.astro} +26 -30
package/src/{index.html → html/pages/index.astro} +266 -189
package/src/{index2.html → html/pages/index2.astro} +229 -284
package/src/{index3.html → html/pages/index3.astro} +151 -169
package/src/{pages/layout/fixed-sidebar.html → html/pages/layout/fixed-sidebar.astro} +26 -29
package/src/html/pages/layout/layout-rtl.astro +84 -0
package/src/html/pages/layout/sidebar-mini.astro +83 -0
package/src/{pages/layout/unfixed-sidebar.html → html/pages/layout/unfixed-sidebar.astro} +26 -30
package/src/{pages/tables/simple.html → html/pages/tables/simple.astro} +26 -30
package/src/html/pages/widgets/cards.astro +308 -0
package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +26 -31
package/src/html/pages/widgets/small-box.astro +121 -0
package/src/scss/_app-footer.scss +15 -0
package/src/scss/_app-header.scss +26 -0
package/src/scss/_app-main.scss +20 -0
package/src/scss/_app-sidebar.scss +429 -0
package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
package/src/scss/_bootstrap-variables.scss +41 -26
package/src/scss/_callouts.scss +34 -0
package/src/scss/_cards.scss +30 -224
package/src/scss/_direct-chat.scss +15 -9
package/src/scss/_docs.scss +4 -0
package/src/scss/_dropdown.scss +7 -5
package/src/scss/_info-box.scss +2 -6
package/src/scss/_miscellaneous.scss +0 -455
package/src/scss/_mixins.scss +0 -6
package/src/scss/_root.scss +2 -58
package/src/scss/_small-box.scss +15 -38
package/src/scss/_table.scss +0 -50
package/src/scss/_timeline.scss +120 -0
package/src/scss/_variables-dark.scss +15 -8
package/src/scss/_variables.scss +30 -135
package/src/scss/adminlte.scss +1 -1
package/src/scss/mixins/_animations.scss +4 -0
package/src/scss/mixins/_scrollbar.scss +2 -2
package/src/scss/pages/_login_and_register.scss +1 -2
package/src/scss/parts/_core.scss +7 -15
package/src/scss/parts/_extra-components.scss +1 -2
package/src/ts/adminlte.ts +0 -2
package/src/ts/card-widget.ts +42 -18
package/src/ts/direct-chat.ts +33 -8
package/src/ts/layout.ts +6 -4
package/src/ts/push-menu.ts +94 -145
package/src/ts/treeview.ts +17 -23
package/src/ts/util/index.ts +2 -2
package/src/utils/index.js +11 -0
package/tsconfig.json +11 -3
package/.stylelintrc +0 -40
package/CHECKLIST.md +0 -0
package/dist/css/rtl/adminlte.rtl.css.map +0 -1
package/dist/css/rtl/adminlte.rtl.min.css +0 -7
package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
package/dist/index.html +0 -1065
package/dist/index2.html +0 -1629
package/dist/index3.html +0 -1015
package/gulpfile.js +0 -315
package/src/pages/widgets/cards.html +0 -143
package/src/pages/widgets/small-box.html +0 -124
package/src/partials/_head.html +0 -31
package/src/partials/dashboard/_footer.html +0 -9
package/src/partials/dashboard/_sidenav.html +0 -244
package/src/scss/_brand-container.scss +0 -72
package/src/scss/_content-header.scss +0 -9
package/src/scss/_content-wrapper.scss +0 -6
package/src/scss/_content.scss +0 -3
package/src/scss/_layout-fixed.scss +0 -43
package/src/scss/_layout-mobile.scss +0 -22
package/src/scss/_main-footer.scss +0 -28
package/src/scss/_main-header.scss +0 -40
package/src/scss/_main-sidebar.scss +0 -63
package/src/scss/_nav-sidebar.scss +0 -66
package/src/scss/_products.scss +0 -55
package/src/scss/_sidebar-close.scss +0 -6
package/src/scss/_sidebar-collapse.scss +0 -120
package/src/scss/_sidebar-horizontal.scss +0 -67
package/src/scss/_sidebar.scss +0 -11
package/src/scss/_users-list.scss +0 -45
package/src/scss/mixins/_brand-variant.scss +0 -9
package/src/scss/mixins/_cards.scss +0 -53
package/src/scss/mixins/_direct-chat.scss +0 -17
package/src/scss/mixins/_header-variant.scss +0 -22
package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
package/src/scss/mixins/_nav-treeview-light.scss +0 -89
package/src/scss/mixins/_sidebar-color.scss +0 -9

package/dist/pages/docs/components/main-header.html ADDED Viewed

@@ -0,0 +1,926 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- Primary Meta Tags -->
+    <title>Main Header Component | AdminLTE 4</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title" content="Main Header 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.">
+    <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">
+    <!-- OPTIONAL LINKS -->
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
+    <!-- overlayscrollbars -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
+    <!-- @fortawesome/fontawesome-free -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
+    <!-- REQUIRED LINKS -->
+    <!-- Theme style -->
+    <link rel="stylesheet" href="../../../../dist/css/adminlte.css">
+</head>
+<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+        <!-- Navbar -->
+        <nav class="app-header navbar navbar-expand bg-body">
+            <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="fa-solid fa-bars"></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="fa-solid fa-search"></i>
+                        </a>
+                    </li>
+                    <!-- Messages Dropdown Menu -->
+                    <li class="nav-item dropdown">
+                        <a class="nav-link" data-bs-toggle="dropdown" href="#">
+                            <i class="fa-regular fa-comments"></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="fa-solid fa-star"></i></span>
+                                        </h3>
+                                        <p class="fs-7">Call me whenever you can...</p>
+                                        <p class="fs-7 text-secondary"><i class="fa-regular fa-clock 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="fa-solid fa-star"></i></span>
+                                        </h3>
+                                        <p class="fs-7">I got your message bro</p>
+                                        <p class="fs-7 text-secondary"><i class="fa-regular fa-clock 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="fa-solid fa-star"></i></span>
+                                        </h3>
+                                        <p class="fs-7">The subject goes here</p>
+                                        <p class="fs-7 text-secondary"><i class="fa-regular fa-clock 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="fa-regular fa-bell"></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="fa-solid fa-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="fa-solid fa-users 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="fa-solid fa-file 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">
+                                <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>
+                                <!-- /.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>
+                    <!-- TODO tackel in v4.1 -->
+                    <!-- <li class="nav-item">
+        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
+          <i class="fa-solid fa-expand-arrows-alt"></i>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
+          <i class="fa-solid fa-th-large"></i>
+        </a>
+      </li> -->
+                </ul>
+            </div>
+        </nav>
+        <!-- /.navbar -->
+        <!-- Sidebar Container -->
+        <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+            <div class="sidebar-brand">
+                <a href="../../../index.html" class="brand-link">
+                    <img src="../../../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
+                    <span class="brand-text fw-light">AdminLTE 4</span>
+                </a>
+            </div>
+            <!-- Sidebar -->
+            <div class="sidebar-wrapper">
+                <nav class="mt-2">
+                    <!-- Sidebar Menu -->
+                    <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-gauge-high"></i>
+                                <p>
+                                    Dashboard
+                                    <i class="nav-arrow fa-solid fa-angle-right"></i>
+                                </p>
+                            </a>
+                            <ul class="nav nav-treeview">
+                                <li class="nav-item">
+                                    <a href="../../../index.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Dashboard v1</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="../../../index2.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Dashboard v2</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="../../../index3.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Dashboard v3</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-box-open"></i>
+                                <p>
+                                    Widgets
+                                    <i class="nav-arrow fa-solid fa-angle-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 fa-regular fa-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 fa-regular fa-circle"></i>
+                                        <p>info Box</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="../../../widgets/cards.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Cards</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-copy"></i>
+                                <p>
+                                    Layout Options
+                                    <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
+                                    <i class="nav-arrow fa-solid fa-angle-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 fa-regular fa-circle"></i>
+                                        <p>Unfixed Sidebar</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="../../../layout/fixed-sidebar.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Fixed Sidebar</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="../../../layout/sidebar-mini.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Sidebar Mini</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="../../../layout/layout-rtl.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Layout RTL</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-tree"></i>
+                                <p>
+                                    UI Elements
+                                    <i class="nav-arrow fa-solid fa-angle-right"></i>
+                                </p>
+                            </a>
+                            <ul class="nav nav-treeview">
+                                <li class="nav-item">
+                                    <a href="../../../UI/timeline.html" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Timeline</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-pen-to-square"></i>
+                                <p>
+                                    Forms
+                                    <i class="nav-arrow fa-solid fa-angle-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 fa-regular fa-circle"></i>
+                                        <p>General Elements</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-table"></i>
+                                <p>
+                                    Tables
+                                    <i class="nav-arrow fa-solid fa-angle-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 fa-regular fa-circle"></i>
+                                        <p>Simple Tables</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-header">EXAMPLES</li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
+                                <p>
+                                    Login & Register
+                                    <i class="nav-arrow fa-solid fa-angle-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 fa-regular fa-circle"></i>
+                                        <p>Login v1</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="../../../examples/register.html" class="nav-link ">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Register v1</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-header">DOCUMENTATIONS</li>
+                        <li class="nav-item">
+                            <a href="../../../docs/index.html" class="nav-link">
+                                <i class="nav-icon fa-solid fa-download"></i>
+                                <p>Installation</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="../../../docs/layout.html" class="nav-link">
+                                <i class="nav-icon fa-solid fa-grip"></i>
+                                <p>Layout</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="../../../docs/color-mode.html" class="nav-link">
+                                <i class="nav-icon fa-solid fa-star-half-stroke"></i>
+                                <p>Color Mode</p>
+                            </a>
+                        </li>
+                        <li class="nav-item menu-open">
+                            <a href="javascript:;" class="nav-link active">
+                                <i class="nav-icon fa-solid fa-swatchbook"></i>
+                                <p>
+                                    Components
+                                    <i class="nav-arrow fa-solid fa-angle-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 fa-regular fa-circle"></i>
+                                        <p>Main Header</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="../../../docs/browser-support.html" class="nav-link">
+                                <i class="nav-icon fa-solid fa-edge"></i>
+                                <p>Browser Support</p>
+                            </a>
+                        </li>
+                        <li class="nav-header">MULTI LEVEL EXAMPLE</li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-circle"></i>
+                                <p>Level 1</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-circle"></i>
+                                <p>
+                                    Level 1
+                                    <i class="nav-arrow fa-solid fa-angle-right"></i>
+                                </p>
+                            </a>
+                            <ul class="nav nav-treeview">
+                                <li class="nav-item">
+                                    <a href="javascript:;" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Level 2</p>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="javascript:;" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>
+                                            Level 2
+                                            <i class="nav-arrow fa-solid fa-angle-right"></i>
+                                        </p>
+                                    </a>
+                                    <ul class="nav nav-treeview">
+                                        <li class="nav-item">
+                                            <a href="javascript:;" class="nav-link">
+                                                <i class="nav-icon fa-regular fa-dot-circle"></i>
+                                                <p>Level 3</p>
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="javascript:;" class="nav-link">
+                                                <i class="nav-icon fa-regular fa-dot-circle"></i>
+                                                <p>Level 3</p>
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="javascript:;" class="nav-link">
+                                                <i class="nav-icon fa-regular fa-dot-circle"></i>
+                                                <p>Level 3</p>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="javascript:;" class="nav-link">
+                                        <i class="nav-icon fa-regular fa-circle"></i>
+                                        <p>Level 2</p>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-solid fa-circle"></i>
+                                <p>Level 1</p>
+                            </a>
+                        </li>
+                        <li class="nav-header">LABELS</li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-regular fa-circle text-danger"></i>
+                                <p class="text">Important</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-regular fa-circle text-warning"></i>
+                                <p>Warning</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="javascript:;" class="nav-link">
+                                <i class="nav-icon fa-regular fa-circle text-info"></i>
+                                <p>Informational</p>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+            <!-- /.sidebar -->
+        </aside>
+        <!-- Main content -->
+        <main class="app-main">
+            <div class="app-content-header">
+                <div class="container-fluid">
+                    <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>
+                </div>
+            </div>
+            <!-- Main content -->
+            <div class="app-content">
+                <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 [Bootstrap documentation](https://getbootstrap.com/) 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">
+                        <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="fa-solid fa-bars"></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="fa-solid fa-search"></i>
+                                    </a>
+                                </li>
+                                <!-- Messages Dropdown Menu -->
+                                <li class="nav-item dropdown">
+                                    <a class="nav-link" data-bs-toggle="dropdown" href="#">
+                                        <i class="fa-regular fa-comments"></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="fa-solid fa-star"></i></span>
+                                                    </h3>
+                                                    <p class="fs-7">Call me whenever you can...</p>
+                                                    <p class="fs-7 text-secondary"><i class="fa-regular fa-clock 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="fa-solid fa-star"></i></span>
+                                                    </h3>
+                                                    <p class="fs-7">I got your message bro</p>
+                                                    <p class="fs-7 text-secondary"><i class="fa-regular fa-clock 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="fa-solid fa-star"></i></span>
+                                                    </h3>
+                                                    <p class="fs-7">The subject goes here</p>
+                                                    <p class="fs-7 text-secondary"><i class="fa-regular fa-clock 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="fa-regular fa-bell"></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="fa-solid fa-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="fa-solid fa-users 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="fa-solid fa-file 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">
+                                            <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>
+                                            <!-- /.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>
+                    </nav>
+                    <!-- /.navbar -->
+                    <pre is:raw="" class="astro-code dark-plus" style="background-color: #1E1E1E; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #6A9955">&#x3C;!-- Navbar --></span></span>
+<span class="line"><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">nav</span><span style="color: #D4D4D4"> </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: #D4D4D4">  </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">    </span><span style="color: #6A9955">&#x3C;!-- Start navbar links --></span></span>
+<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">ul</span><span style="color: #D4D4D4"> </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: #D4D4D4">      </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"nav-link"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">data-lte-toggle</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"sidebar"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">role</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"button"</span><span style="color: #808080">>&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-bars"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">ul</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #6A9955">&#x3C;!-- End navbar links --></span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">ul</span><span style="color: #D4D4D4"> </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: #D4D4D4">      </span><span style="color: #6A9955">&#x3C;!-- Navbar Search --></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"nav-link"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">data-widget</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"navbar-search"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-search"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #6A9955">&#x3C;!-- Messages Dropdown Menu --></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"nav-link"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">data-bs-toggle</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown"</span><span style="color: #D4D4D4"> </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: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-regular fa-comments"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #6A9955">&#x3C;!-- Message Start --></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">img</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">src</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"../../../dist/assets/img/user1-128x128.jpg"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">alt</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"User Avatar"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"img-size-50 rounded-circle me-3"</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">h3</span><span style="color: #D4D4D4"> </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: #D4D4D4">                  </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">>&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-star"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">h3</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">p</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">p</span><span style="color: #D4D4D4"> </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">>&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-regular fa-clock me-1"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">></span><span style="color: #D4D4D4"> 4 Hours Ago</span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #6A9955">&#x3C;!-- Message End --></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown-divider"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #6A9955">&#x3C;!-- Message Start --></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">img</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">src</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"../../../dist/assets/img/user8-128x128.jpg"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">alt</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"User Avatar"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"img-size-50 rounded-circle me-3"</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">h3</span><span style="color: #D4D4D4"> </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: #D4D4D4">                  </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">>&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-star"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">h3</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">p</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">p</span><span style="color: #D4D4D4"> </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">>&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-regular fa-clock me-1"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">></span><span style="color: #D4D4D4"> 4 Hours Ago</span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #6A9955">&#x3C;!-- Message End --></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown-divider"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #6A9955">&#x3C;!-- Message Start --></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">img</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">src</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"../../../dist/assets/img/user3-128x128.jpg"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">alt</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"User Avatar"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"img-size-50 rounded-circle me-3"</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">h3</span><span style="color: #D4D4D4"> </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: #D4D4D4">                  </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">>&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-star"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">h3</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">p</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">p</span><span style="color: #D4D4D4"> </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">>&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-regular fa-clock me-1"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">></span><span style="color: #D4D4D4"> 4 Hours Ago</span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #6A9955">&#x3C;!-- Message End --></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown-divider"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #6A9955">&#x3C;!-- Notifications Dropdown Menu --></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"nav-link"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">data-bs-toggle</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown"</span><span style="color: #D4D4D4"> </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: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-regular fa-bell"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">i</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown-divider"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-envelope me-2"</span><span style="color: #808080">>&#x3C;/</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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown-divider"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-users me-2"</span><span style="color: #808080">>&#x3C;/</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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown-divider"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">i</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"fa-solid fa-file me-2"</span><span style="color: #808080">>&#x3C;/</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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"dropdown-divider"</span><span style="color: #808080">>&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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 Notifications</span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"nav-link dropdown-toggle"</span><span style="color: #D4D4D4"> </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: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">img</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">src</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"../../../dist/assets/img/user2-160x160.jpg"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"user-image rounded-circle shadow"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">alt</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"User Image"</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">span</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">span</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">ul</span><span style="color: #D4D4D4"> </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: #D4D4D4">          </span><span style="color: #6A9955">&#x3C;!-- User image --></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">img</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">src</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"../../../dist/assets/img/user2-160x160.jpg"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">class</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"rounded-circle shadow"</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">alt</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"User Image"</span><span style="color: #808080">></span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;</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: #D4D4D4">              </span><span style="color: #808080">&#x3C;</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">&#x3C;/</span><span style="color: #569CD6">small</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">p</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #6A9955">&#x3C;!-- Menu Body --></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">div</span><span style="color: #D4D4D4"> </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: #D4D4D4">                </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #6A9955">&#x3C;!-- /.row --></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #6A9955">&#x3C;!-- Menu Footer--></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">li</span><span style="color: #D4D4D4"> </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: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #808080">&#x3C;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">"#"</span><span style="color: #D4D4D4"> </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">&#x3C;/</span><span style="color: #569CD6">a</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">          </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">ul</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">li</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">ul</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">div</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #808080">&#x3C;/</span><span style="color: #569CD6">nav</span><span style="color: #808080">></span></span>
+<span class="line"><span style="color: #6A9955">&#x3C;!-- /.navbar --></span></span></code></pre>
+                </div>
+                <!-- /.container-fluid -->
+            </div>
+            <!-- /.content -->
+        </main>
+        <!-- /.app-content -->
+        <!-- Main Footer -->
+        <footer class="app-footer">
+            <!-- To the end -->
+            <div class="float-end d-none d-sm-inline">
+                Anything you want
+            </div>
+            <!-- Default to the start -->
+            <strong>Copyright &copy; 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+        </footer>
+    </div>
+    <!--  ./app-wrapper -->
+    <!-- OPTIONAL SCRIPTS --><!-- overlayscrollbars -->
+    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
+    <!-- @popperjs for Bootstrap 5 -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
+    <!-- Bootstrap 5 -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
+    <!-- REQUIRED SCRIPTS --><!-- AdminLTE App -->
+    <script src="../../../../dist/js/adminlte.js"></script>
+    <!-- OPTIONAL SCRIPTS -->
+    <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)
+            if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
+                OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
+                    scrollbars: {
+                        theme: Default.scrollbarTheme,
+                        autoHide: Default.scrollbarAutoHide,
+                        clickScroll: Default.scrollbarClickScroll
+                    }
+                })
+            }
+        })
+    </script>
+</body>
+</html>