<!-- ========== Left Sidebar Start ========== -->
<div class="leftside-menu">

    <!-- Brand Logo Light -->
    <a href="index.php" class="logo logo-light">
        <span class="logo-lg">
            <img src="assets/images/logo.png" alt="logo">
        </span>
        <span class="logo-sm">
            <img src="assets/images/logo-sm.png" alt="small logo">
        </span>
    </a>

    <!-- Brand Logo Dark -->
    <a href="index.php" class="logo logo-dark">
        <span class="logo-lg">
            <img src="assets/images/logo-dark.png" alt="dark logo">
        </span>
        <span class="logo-sm">
            <img src="assets/images/logo-sm.png" alt="small logo">
        </span>
    </a>

    <!-- Sidebar -left -->
    <div class="h-100" id="leftside-menu-container" data-simplebar>
        <!--- Sidemenu -->
        <ul class="side-nav">

            <li class="side-nav-title">Main</li>

            <li class="side-nav-item">
                <a href="index.php" class="side-nav-link">
                    <i class="ri-dashboard-3-line"></i>
                    <span class="badge bg-success float-end">9+</span>
                    <span> Dashboard </span>
                </a>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" aria-controls="sidebarPages" class="side-nav-link">
                    <i class="ri-pages-line"></i>
                    <span> Pages </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarPages">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="pages-starter.php">Starter Page</a>
                        </li>
                        <li>
                            <a href="pages-contact-list.php">Contact List</a>
                        </li>
                        <li>
                            <a href="pages-profile.php">Profile</a>
                        </li>
                        <li>
                            <a href="pages-timeline.php">Timeline</a>
                        </li>
                        <li>
                            <a href="pages-invoice.php">Invoice</a>
                        </li>
                        <li>
                            <a href="pages-faq.php">FAQ</a>
                        </li>
                        <li>
                            <a href="pages-pricing.php">Pricing</a>
                        </li>
                        <li>
                            <a href="pages-maintenance.php">Maintenance</a>
                        </li>
                        <li>
                            <a href="error-404.php">Error 404</a>
                        </li>
                        <li>
                            <a href="error-404-alt.php">Error 404-alt</a>
                        </li>
                        <li>
                            <a href="error-500.php">Error 500</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false" aria-controls="sidebarPagesAuth" class="side-nav-link">
                    <i class="ri-group-2-line"></i>
                    <span> Authentication </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarPagesAuth">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="auth-login.php">Login</a>
                        </li>
                        <li>
                            <a href="auth-register.php">Register</a>
                        </li>
                        <li>
                            <a href="auth-logout.php">Logout</a>
                        </li>
                        <li>
                            <a href="auth-forgotpw.php">Forgot Password</a>
                        </li>
                        <li>
                            <a href="auth-lock-screen.php">Lock Screen</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false" aria-controls="sidebarLayouts" class="side-nav-link">
                    <i class="ri-layout-line"></i>
                    <span class="badge bg-warning float-end">New</span>
                    <span> Layouts </span>
                </a>
                <div class="collapse" id="sidebarLayouts">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="layouts-horizontal.php" target="_blank">Horizontal</a>
                        </li>
                        <li>
                            <a href="layouts-light-sidebar.php" target="_blank">Light Sidebar</a>
                        </li>
                        <li>
                            <a href="layouts-sm-sidebar.php" target="_blank">Small Sidebar</a>
                        </li>
                        <li>
                            <a href="layouts-collapsed-sidebar.php" target="_blank">Collapsed Sidebar</a>
                        </li>
                        <li>
                            <a href="layouts-unsticky-layout.php" target="_blank">Unsticky Layout</a>
                        </li>
                        <li>
                            <a href="layouts-boxed.php" target="_blank">Boxed Layout</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-title">Components</li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false" aria-controls="sidebarBaseUI" class="side-nav-link">
                    <i class="ri-briefcase-line"></i>
                    <span> Base UI </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarBaseUI">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="ui-accordions.php">Accordions</a>
                        </li>
                        <li>
                            <a href="ui-alerts.php">Alerts</a>
                        </li>
                        <li>
                            <a href="ui-avatars.php">Avatars</a>
                        </li>
                        <li>
                            <a href="ui-buttons.php">Buttons</a>
                        </li>
                        <li>
                            <a href="ui-badges.php">Badges</a>
                        </li>
                        <li>
                            <a href="ui-breadcrumb.php">Breadcrumb</a>
                        </li>
                        <li>
                            <a href="ui-cards.php">Cards</a>
                        </li>
                        <li>
                            <a href="ui-carousel.php">Carousel</a>
                        </li>
                        <li>
                            <a href="ui-collapse.php">Collapse</a>
                        </li>
                        <li>
                            <a href="ui-dropdowns.php">Dropdowns</a>
                        </li>
                        <li>
                            <a href="ui-embed-video.php">Embed Video</a>
                        </li>
                        <li>
                            <a href="ui-grid.php">Grid</a>
                        </li>
                        <li>
                            <a href="ui-links.php">Links</a>
                        </li>
                        <li>
                            <a href="ui-list-group.php">List Group</a>
                        </li>
                        <li>
                            <a href="ui-modals.php">Modals</a>
                        </li>
                        <li>
                            <a href="ui-notifications.php">Notifications</a>
                        </li>
                        <li>
                            <a href="ui-offcanvas.php">Offcanvas</a>
                        </li>
                        <li>
                            <a href="ui-placeholders.php">Placeholders</a>
                        </li>
                        <li>
                            <a href="ui-pagination.php">Pagination</a>
                        </li>
                        <li>
                            <a href="ui-popovers.php">Popovers</a>
                        </li>
                        <li>
                            <a href="ui-progress.php">Progress</a>
                        </li>
                        <li>
                            <a href="ui-spinners.php">Spinners</a>
                        </li>
                        <li>
                            <a href="ui-tabs.php">Tabs</a>
                        </li>
                        <li>
                            <a href="ui-tooltips.php">Tooltips</a>
                        </li>
                        <li>
                            <a href="ui-typography.php">Typography</a>
                        </li>
                        <li>
                            <a href="ui-utilities.php">Utilities</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarExtendedUI" aria-expanded="false" aria-controls="sidebarExtendedUI" class="side-nav-link">
                    <i class="ri-compasses-2-line"></i>
                    <span> Extended UI </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarExtendedUI">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="extended-portlets.php">Portlets</a>
                        </li>
                        <li>
                            <a href="extended-scrollbar.php">Scrollbar</a>
                        </li>
                        <li>
                            <a href="extended-range-slider.php">Range Slider</a>
                        </li>
                        <li>
                            <a href="extended-scrollspy.php">Scrollspy</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" aria-controls="sidebarIcons" class="side-nav-link">
                    <i class="ri-pencil-ruler-2-line"></i>
                    <span> Icons </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarIcons">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="icons-remixicons.php">Remix Icons</a>
                        </li>
                        <li>
                            <a href="icons-bootstrap.php">Bootstrap Icons</a>
                        </li>
                        <li>
                            <a href="icons-mdi.php">Material Design Icons</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false" aria-controls="sidebarCharts" class="side-nav-link">
                    <i class="ri-donut-chart-fill"></i>
                    <span> Charts </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarCharts">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="charts-apex.php">Apex Charts</a>
                        </li>
                        <li>
                            <a href="charts-chartjs.php">Chartjs</a>
                        </li>
                        <li>
                            <a href="charts-sparklines.php">Sparkline Charts</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" aria-controls="sidebarForms" class="side-nav-link">
                    <i class="ri-survey-line"></i>
                    <span> Forms </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarForms">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="form-elements.php">Basic Elements</a>
                        </li>
                        <li>
                            <a href="form-advanced.php">Form Advanced</a>
                        </li>
                        <li>
                            <a href="form-validation.php">Form Validation</a>
                        </li>
                        <li>
                            <a href="form-wizard.php">Form Wizard</a>
                        </li>
                        <li>
                            <a href="form-fileuploads.php">File Uploads</a>
                        </li>
                        <li>
                            <a href="form-editors.php">Form Editors</a>
                        </li>
                        <li>
                            <a href="form-image-crop.php">Image Crop</a>
                        </li>
                        <li>
                            <a href="form-x-editable.php">X Editable</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false" aria-controls="sidebarTables" class="side-nav-link">
                    <i class="ri-table-line"></i>
                    <span> Tables </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarTables">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="tables-basic.php">Basic Tables</a>
                        </li>
                        <li>
                            <a href="tables-datatable.php">Data Tables</a>
                        </li>
                        <li>
                            <a href="tables-editable.php">Editable Tables</a>
                        </li>
                        <li>
                            <a href="tables-responsive.php">Responsive Table</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" aria-controls="sidebarMaps" class="side-nav-link">
                    <i class="ri-map-pin-line"></i>
                    <span> Maps </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarMaps">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="maps-google.php">Google Maps</a>
                        </li>
                        <li>
                            <a href="maps-vector.php">Vector Maps</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="side-nav-item">
                <a data-bs-toggle="collapse" href="#sidebarMultiLevel" aria-expanded="false" aria-controls="sidebarMultiLevel" class="side-nav-link">
                    <i class="ri-share-line"></i>
                    <span> Multi Level </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse" id="sidebarMultiLevel">
                    <ul class="side-nav-second-level">
                        <li>
                            <a href="javascript: void(0);">Level 1.1</a>
                        </li>
                        <li class="side-nav-item">
                            <a data-bs-toggle="collapse" href="#sidebarSecondLevel" aria-expanded="false" aria-controls="sidebarSecondLevel">
                                <span> Level 1.2 </span>
                                <span class="menu-arrow"></span>
                            </a>
                            <div class="collapse" id="sidebarSecondLevel">
                                <ul class="side-nav-third-level">
                                    <li>
                                        <a href="javascript: void(0);">Item 1</a>
                                    </li>
                                    <li>
                                        <a href="javascript: void(0);">Item 2</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="side-nav-item">
                            <a data-bs-toggle="collapse" href="#sidebarThirdLevel" aria-expanded="false" aria-controls="sidebarThirdLevel">
                                <span> Level 1.3 </span>
                                <span class="menu-arrow"></span>
                            </a>
                            <div class="collapse" id="sidebarThirdLevel">
                                <ul class="side-nav-third-level">
                                    <li>
                                        <a href="javascript: void(0);">Item 1</a>
                                    </li>
                                    <li class="side-nav-item">
                                        <a data-bs-toggle="collapse" href="#sidebarFourthLevel" aria-expanded="false" aria-controls="sidebarFourthLevel">
                                            <span> Item 2 </span>
                                            <span class="menu-arrow"></span>
                                        </a>
                                        <div class="collapse" id="sidebarFourthLevel">
                                            <ul class="side-nav-forth-level">
                                                <li>
                                                    <a href="javascript: void(0);">Item 2.1</a>
                                                </li>
                                                <li>
                                                    <a href="javascript: void(0);">Item 2.2</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>


        </ul>
        <!--- End Sidemenu -->

        <div class="clearfix"></div>
    </div>
</div>
<!-- ========== Left Sidebar End ========== -->