<style>
.order:hover i {
    display: block !important;
}

.active i {
    display: block !important;
}

/* Sidebar — height, rhythm, professional polish */
.sidebar-wrapper .sidebar-nav.care-sidenav-pro {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    padding-inline: 0.85rem;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav.metismenu > li + li {
    margin-top: 6px;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-section-label {
    padding: 0.35rem 1rem 0.85rem;
    margin: 0 0 0.15rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.3;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.65rem;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav > li > a {
    min-height: 48px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav > li > a:hover {
    transform: translateX(2px);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav > li.mm-active > a {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 18px rgba(0, 0, 0, 0.15);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav > li.mm-active > a .icnonDiv {
    opacity: 1;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .icnonDiv {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    margin-right: 2px;
    transition: background 0.2s ease;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav > li > a:hover .icnonDiv {
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav > li.mm-active > a .icnonDiv {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-icon-fa {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    line-height: 1;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-divider {
    height: 1px;
    margin: 1.35rem 0.5rem 1rem;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    flex-shrink: 0;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-footer.metismenu {
    margin-top: 0.25rem;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-footer > li + li {
    margin-top: 6px;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-footer > li > a {
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.15s ease;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-footer > li > a:hover {
    transform: translateX(2px);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-footer .icnonDiv {
    min-width: 38px;
    min-height: 38px;
}

/* main.css hides .img2 until hover; keep Settings/Logout SVGs always visible */
.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-footer .img2 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Submenu styling (MetisMenu) */
.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav li ul {
    padding: 0.35rem 0 0.15rem;
    margin: 0.1rem 0 0.35rem;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav li ul li {
    margin: 4px 0;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav li ul li a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 14px 9px 44px; /* indent under icon */
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.84);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
    position: relative;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav li ul li a::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav li ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
    color: #fff;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav li ul li.mm-active > a {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav li ul li.mm-active > a::before {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* Main menu scrolls; footer + divider stay pinned (tall Administration lists) */
.sidebar-wrapper .sidebar-nav.care-sidenav-pro {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px);
    margin-top: 70px;
    overflow: hidden;
    box-sizing: border-box;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-sidenav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-inline: 0.02rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.32) rgba(255, 255, 255, 0.08);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-sidenav-scroll::-webkit-scrollbar {
    width: 8px;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-sidenav-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-sidenav-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 8px;
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-sidenav-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.42);
}

.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-divider,
.sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-footer {
    flex-shrink: 0;
}

/* Logo is 150×120 — give it a matching header so it is not cropped or stretched */
.sidebar-wrapper .sidebar-header {
    height: 128px;
    padding: 0.35rem 0.85rem;
    justify-content: center;
    gap: 0.35rem;
}
.sidebar-wrapper .sidebar-header .logo-icon {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.sidebar-wrapper .sidebar-header .logo-icon img {
    width: 150px;
    height: 120px;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.sidebar-wrapper .sidebar-header .logo-name {
    flex-grow: 0 !important;
    width: 0;
    overflow: hidden;
}
.sidebar-wrapper .sidebar-nav.care-sidenav-pro {
    height: calc(100vh - 128px) !important;
    max-height: calc(100vh - 128px);
    margin-top: 128px;
}
@media screen and (min-width: 1199px) {
    body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-icon img {
        width: 48px;
        height: 38px;
    }
}
</style>
<aside class="sidebar-wrapper">
    <div class="sidebar-header">
        <div class="logo-icon">
            <img src="<?php echo base_url('assets/images/dplogo.png'); ?>" width="150" height="120" alt="Teen Up">
        </div>
        <div class="logo-name">

        </div>
        <div class="sidebar-close">
            <span class="material-icons-outlined">close</span>
        </div>
    </div>
    <div class="sidebar-nav care-sidenav-pro">

        <!--navigation-->
        <div class="care-sidenav-scroll">
        <ul class="metismenu" id="sidenav">
            <li class="care-nav-section-label menu-label">Admin Panel</li>
            <?php
            $CI = &get_instance();
            $adm1 = strtolower((string) $CI->uri->segment(1));
            $seg2 = $CI->uri->segment(2);
            $adm2 = $seg2 ? strtolower((string) $seg2) : '';
            $seg3 = $CI->uri->segment(3);
            $adm3 = $seg3 ? strtolower((string) $seg3) : '';

            $is_dashboard = ($adm1 === 'admin' && ($adm2 === '' || $adm2 === 'index' || $adm2 === 'dashboard')) || ($adm1 === 'dashboard' && ($adm2 === '' || $adm2 === 'index'));
            $is_stores = ($adm1 === 'admin' && in_array($adm2, array('stores', 'store_list', 'add_store', 'store_details', 'store_edit', 'store_view'), true));
            $is_checklists = ($adm1 === 'admin' && in_array($adm2, array('checklists', 'checklist_templates', 'checklist_items', 'checklist_assignment', 'store_assignment'), true));
            $is_schedules = ($adm1 === 'admin' && in_array($adm2, array('schedules', 'reminder_schedules', 'escalation_settings', 'reminders'), true));
            $is_compliance = ($adm1 === 'admin' && in_array($adm2, array('compliance', 'live_compliance', 'task_history', 'overdue_tasks'), true));
            $is_media = ($adm1 === 'admin' && in_array($adm2, array('media', 'evidence', 'photos', 'videos', 'media_photos', 'media_videos'), true));
            $is_staff = ($adm1 === 'admin' && in_array($adm2, array('staff', 'staff_list', 'staff_assignment', 'staff_store_assignment', 'employee'), true));
            $is_managers = ($adm1 === 'admin' && in_array($adm2, array('managers', 'manager_list', 'manager_details'), true));
            $is_training = ($adm1 === 'admin' && in_array($adm2, array('training', 'training_library', 'training_list', 'add_training', 'training_assignment'), true));
            $is_reports = ($adm1 === 'admin' && in_array($adm2, array('reports', 'reports_daily', 'reports_weekly', 'reports_monthly', 'reports_storewise', 'report_daily', 'report_weekly', 'report_monthly', 'report_storewise'), true)) || ($adm1 === 'reports');
            $is_notifications = ($adm1 === 'admin' && in_array($adm2, array('notifications', 'notification'), true)) || ($adm1 === 'notification');
            $is_admin_users = ($adm1 === 'admin' && in_array($adm2, array('admin_users', 'roles', 'permissions', 'roles_permissions', 'roles_and_permissions'), true));
            $is_audit_logs = ($adm1 === 'admin' && in_array($adm2, array('audit_logs', 'logs', 'audit'), true));
            $is_settings = ($adm1 === 'admin' && in_array($adm2, array('settings', 'app_settings', 'websitesetting'), true)) || ($adm1 === 'settings');
            ?>

            <!-- Dashboard -->
            <li class="<?php echo $is_dashboard ? 'mm-active' : ''; ?>">
                <a href="<?php echo base_url('admin'); ?>" class="">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-gauge-high img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Dashboard</div>
                </a>
            </li>

            <!-- Stores -->
            <li class="<?php echo $is_stores ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-store img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Stores</div>
                </a>
                <ul class="<?php echo $is_stores ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('stores', 'store_list'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/stores'); ?>">Store List</a>
                    </li>
                    <li class="<?php echo ($adm2 === 'add_store') ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/add_store'); ?>">Add Store</a>
                    </li>
                    <li class="<?php echo in_array($adm2, array('store_details', 'store_view', 'store_edit'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/store_details'); ?>">Store Details</a>
                    </li>
                </ul>
            </li>

            <!-- Checklists -->
            <li class="<?php echo $is_checklists ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-clipboard-check img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Checklists</div>
                </a>
                <ul class="<?php echo $is_checklists ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('checklists', 'checklist_templates'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/checklist_templates'); ?>">Checklist Templates</a>
                    </li>
                    <li class="<?php echo ($adm2 === 'checklist_items') ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/checklist_items'); ?>">Checklist Items</a>
                    </li>
                    <li class="<?php echo in_array($adm2, array('checklist_assignment', 'store_assignment'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/checklist_assignment'); ?>">Store Assignment</a>
                    </li>
                </ul>
            </li>

            <!-- Schedules -->
            <li class="<?php echo $is_schedules ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-calendar-days img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Schedules</div>
                </a>
                <ul class="<?php echo $is_schedules ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('schedules', 'reminder_schedules', 'reminders'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/reminder_schedules'); ?>">Reminder Schedules</a>
                    </li>
                    <li class="<?php echo ($adm2 === 'escalation_settings') ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/escalation_settings'); ?>">Escalation Settings</a>
                    </li>
                </ul>
            </li>

            <!-- Compliance -->
            <li class="<?php echo $is_compliance ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-shield-halved img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Compliance</div>
                </a>
                <ul class="<?php echo $is_compliance ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('compliance', 'live_compliance'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/live_compliance'); ?>">Live Compliance</a>
                    </li>
                    <li class="<?php echo ($adm2 === 'task_history') ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/task_history'); ?>">Task History</a>
                    </li>
                    <li class="<?php echo ($adm2 === 'overdue_tasks') ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/overdue_tasks'); ?>">Overdue Tasks</a>
                    </li>
                </ul>
            </li>

            <!-- Media / Evidence -->
            <li class="<?php echo $is_media ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-photo-film img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Media / Evidence</div>
                </a>
                <ul class="<?php echo $is_media ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('photos', 'media_photos'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/photos'); ?>">Photos</a>
                    </li>
                    <li class="<?php echo in_array($adm2, array('videos', 'media_videos'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/videos'); ?>">Videos</a>
                    </li>
                </ul>
            </li>

            <!-- Staff -->
            <li class="<?php echo $is_staff ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-users img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Staff</div>
                </a>
                <ul class="<?php echo $is_staff ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('staff', 'staff_list'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/staff'); ?>">Staff List</a>
                    </li>
                    <li class="<?php echo in_array($adm2, array('staff_assignment', 'staff_store_assignment'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/staff_assignment'); ?>">Staff Store Assignment</a>
                    </li>
                </ul>
            </li>

            <!-- Managers -->
            <li class="<?php echo $is_managers ? 'mm-active' : ''; ?>">
                <a href="<?php echo base_url('admin/managers'); ?>" class="">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-user-tie img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Managers</div>
                </a>
            </li>

            <!-- Training Library -->
            <li class="<?php echo $is_training ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-book-open-reader img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Training Library</div>
                </a>
                <ul class="<?php echo $is_training ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('training', 'training_library', 'training_list'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/training_list'); ?>">Training List</a>
                    </li>
                    <li class="<?php echo ($adm2 === 'add_training') ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/add_training'); ?>">Add Training</a>
                    </li>
                    <li class="<?php echo in_array($adm2, array('training_assignment', 'training_store_assignment'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/training_assignment'); ?>">Store Assignment</a>
                    </li>
                </ul>
            </li>

            <!-- Reports -->
            <li class="<?php echo $is_reports ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-chart-line img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Reports</div>
                </a>
                <ul class="<?php echo $is_reports ? 'mm-show' : ''; ?>">
                    <li class="<?php echo (in_array($adm2, array('reports_daily', 'report_daily'), true) || ($adm2 === 'reports' && $adm3 === 'daily')) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/reports_daily'); ?>">Daily</a>
                    </li>
                    <li class="<?php echo (in_array($adm2, array('reports_weekly', 'report_weekly'), true) || ($adm2 === 'reports' && $adm3 === 'weekly')) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/reports_weekly'); ?>">Weekly</a>
                    </li>
                    <li class="<?php echo (in_array($adm2, array('reports_monthly', 'report_monthly'), true) || ($adm2 === 'reports' && $adm3 === 'monthly')) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/reports_monthly'); ?>">Monthly</a>
                    </li>
                    <li class="<?php echo (in_array($adm2, array('reports_storewise', 'report_storewise'), true) || ($adm2 === 'reports' && $adm3 === 'storewise')) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/reports_storewise'); ?>">Store-wise</a>
                    </li>
                </ul>
            </li>

            <!-- Notifications -->
            <li class="<?php echo $is_notifications ? 'mm-active' : ''; ?>">
                <a href="<?php echo base_url('admin/notifications'); ?>" class="">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-bell img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Notifications</div>
                </a>
            </li>

            <!-- Admin Users -->
            <li class="<?php echo $is_admin_users ? 'mm-active' : ''; ?>">
                <a href="javascript:;" class="has-arrow">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-user-gear img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Admin Users</div>
                </a>
                <ul class="<?php echo $is_admin_users ? 'mm-show' : ''; ?>">
                    <li class="<?php echo in_array($adm2, array('roles', 'permissions', 'roles_permissions', 'roles_and_permissions'), true) ? 'mm-active' : ''; ?>">
                        <a href="<?php echo base_url('admin/roles_permissions'); ?>">Roles &amp; Permissions</a>
                    </li>
                </ul>
            </li>

            <!-- Audit Logs -->
            <li class="<?php echo $is_audit_logs ? 'mm-active' : ''; ?>">
                <a href="<?php echo base_url('admin/audit_logs'); ?>" class="">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-clock-rotate-left img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Audit Logs</div>
                </a>
            </li>

            <!-- Settings -->
            <li class="<?php echo $is_settings ? 'mm-active' : ''; ?>">
                <a href="<?php echo base_url('admin/app_settings'); ?>" class="">
                    <div class="icnonDiv">
                        <i class="fa-solid fa-gear img2 care-nav-icon-fa"></i>
                    </div>
                    <div class="menu-title">Settings</div>
                </a>
            </li>
        </ul>
        </div>

        <div class="care-nav-divider" role="presentation"></div>

        <ul class="metismenu care-nav-footer">
            <li class="d-none">
                <a href="<?php echo base_url().'dashboard/settings' ?>" class="">
                    <div class="icnonDiv">
                        <span class="img2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor"
                                class="bi bi-gear-fill" viewBox="0 0 16 16" aria-hidden="true">
                                <path
                                    d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
                            </svg>
                        </span>
                    </div>
                    <div class="menu-title">Settings</div>
                </a>
            </li>
            <li>
                <a href="<?php echo base_url('login/logout'); ?>" class="">
                    <div class="icnonDiv">
                        <span class="img2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor"
                                class="bi bi-box-arrow-left" viewBox="0 0 16 16" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z" />
                                <path fill-rule="evenodd"
                                    d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z" />
                            </svg>
                        </span>
                    </div>
                    <div class="menu-title">Logout</div>
                </a>
            </li>
        </ul>
        <!--end navigation-->
    </div>

</aside>
<main class="main-wrapper">
    <div class="main-content">