<style>
    .sidebar {
        /* font-size: 20px !important; */
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    .icon::before {
        font-weight: bold !important;
    }
</style>
<div class="sidenav">
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasSidenav">
        <div class="offcanvas-header background border-bottom border-light">
            <div class="hstack gap-3">
                <div class="">
                    <img src="assets/images/avatars/01.webp" width="45" class="rounded-3 p-1 bg-white" alt="">
                </div>
                <div class="details">
                    <h6 class="mb-0 text-white">Hi! UyqIRr</h6>
                </div>
            </div>
            <div data-bs-dismiss="offcanvas"><i class="bi bi-x-lg fs-5 text-white"></i></div>
        </div>
        <div class="offcanvas-body p-0">
            <nav class="sidebar-nav">
                <ul class="metismenu" id="sidenav">
                    <li><a href="dashboard.php" class="sidebar"><i class="fw-bold bi bi-house-door  icon"></i> Dashboard</a></li>
                    <li><a href="user_new_order.php" class="sidebar"><i class="bi bi-cart-plus  icon"></i> New Orders </a></li>
                    <li><a href="user_pending_order.php" class="sidebar"><i class="nav-icon fa fa-clock-o"></i> Pending Orders
                        </a></li>
                    <li><a href="user_cancel_order.php" class="sidebar"><i class="fa fa-times" aria-hidden="true"></i> Cancel Orders </a>
                    </li>
                    <li><a href="user_order_history.php" class="sidebar"><i class="nav-icon fa fa-shopping-basket"></i> Order History </a>
                    </li>

                    <li><a href="user_product_price.php" class="sidebar"><i class="nav-icon fa fa-money "></i> Product
                            Price </a></li>


                    <li><a href="user_add_panel_request.php" class="sidebar"><img src="withdrawal.png" style="height:15px; width:20px;" alt=""> deposit </a></li>
                    <li><a href="user_usdt_history.php" class="sidebar"><i class="nav-icon fas fa-history"></i> History </a>
                    </li>

                    <li>
                        <a class="has-arrow sidebar" href="javascript:;">
                            <i class="fa fa-cog" aria-hidden="true"></i>

                            Setting
                        </a>
                        <ul>
                            <li><a href="my-profile.php" class="sidebar"><i class="fa fa-circle-o" aria-hidden="true"></i> Profile</a></li>
                            <li><a href="change_password.php" class="sidebar"><i class="fa fa-circle-o" aria-hidden="true"></i> Change Password</a></li>

                        </ul>
                    </li>

                    <li><a href="support.php" class="sidebar"><i class="bi bi-headset icon"></i> Support </a></li>
                    <!-- <li><a href="demo.php"><i class="bi bi-headset me-2"></i> Demo </a></li> -->

                </ul>
            </nav>
        </div>
        <div class="offcanvas-footer border-top p-3 background " style="font-size: 25px;">
            <div class="form-check form-switch">
                <i class="fa fa-sign-out text-white fw-bold text-center" aria-hidden="true"></i>
                <!-- <input class="form-check-input text-white" type="checkbox" role="switch" id="DarkMode" onchange="toggleTheme()"> -->
                <label class="form-check-label text-white fw-bold text-center" for="DarkMode">logout</label>
            </div>
        </div>

    </div>
</div>