<aside id="logo-sidebar"
    class="fixed top-0 left-0 rounded-tr-xl rounded-br-xl z-40 w-64 h-screen pt-20 transition-transform -translate-x-full shadow-gray-600 shadow-lg backdrop-blur sm:translate-x-0 bg-red-950"
    aria-label="Sidebar"> 


    
    <div class="h-auto h-ful px-3 pb-4 overflow-y-auto">
        <ul class="space-y-1 font-medium text-sm">
            <li>
                <a href="<?= BASE_URL ?>"
                    class="flex items-center p-2  text-white-900 hover:text-white rounded-lg dark:text-white hover:bg-blue-800 dark:hover:bg-blue-800 group">
                    <svg class="w-5 h-5 text-white transition duration-75 dark:text-purple group-hover:text-sky-900 dark:group-hover:text-white"
                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
                        <path
                            d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
                        <path
                            d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                    </svg>
                    <span class="ml-3 text-white-500">Dashboard</span>
                </a>
            </li>
            <li>

            <!-- <a href="<?= BASE_URL ?> verifications" -->
                <a href="verifications"
                    class="flex items-center p-2  text-white-900 hover:text-white rounded-lg dark:text-white hover:bg-blue-800 dark:hover:bg-blue-800 group">
                    <i class="fas fa-signal"></i>
                    <span class="ml-3 text-white-500">Buy Data</span>
                </a>
            </li>
            <li>
                <a href="<?= BASE_URL ?>"
                    class="flex items-center p-2  text-white-900 hover:text-white rounded-lg dark:text-white hover:bg-blue-800 dark:hover:bg-blue-800 group">
                    <i class="fas fa-phone-square"></i>
                    <span class="ml-3 text-white-500">Buy Airtime</span>
                </a>
            </li>
            <li>
                <a href="<?= BASE_URL ?>"
                    class="flex items-center p-2  text-white-900 hover:text-white rounded-lg dark:text-white hover:bg-blue-800 dark:hover:bg-blue-800 group">
                    <i class="fas fa-money-bill"></i>
                    <span class="ml-3 text-white-500">Pricing</span>
                </a>
            </li>
            <li>
                <a href="<?= BASE_URL ?>"
                    class="flex items-center p-2  text-white-900 hover:text-white rounded-lg dark:text-white hover:bg-blue-800 dark:hover:bg-blue-800 group">
                    <i class="fas fa-lightbulb"></i>
                    <span class="ml-3 text-white-500">Utilities Payment</span>
                </a>
            </li>
            <!-- <li>
                <a href="<?= BASE_URL ?>/verifications"
                    class="flex items-center p-2 text-sky-900 rounded-lg dark:text-white hover:bg-blue-800 dark:hover:bg-blue-800 group">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        style="fill: white; transform: ;msFilter:;">
                        <path
                            d="M8 12.052c1.995 0 3.5-1.505 3.5-3.5s-1.505-3.5-3.5-3.5-3.5 1.505-3.5 3.5 1.505 3.5 3.5 3.5zM9 13H7c-2.757 0-5 2.243-5 5v1h12v-1c0-2.757-2.243-5-5-5zm11.294-4.708-4.3 4.292-1.292-1.292-1.414 1.414 2.706 2.704 5.712-5.702z">
                        </path>
                    </svg>
                    <span class="ml-3 text-white">Services</span>
                </a>
            </li> -->

            <li>
                <a href="<?= BASE_URL ?>/wallet"
                    class="flex items-center p-2 text-purple-900 rounded-lg dark:text-purple hover:bg-blue-800 dark:hover:bg-blue-800 group">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        style="fill: white; ;transform: ;msFilter:;">
                        <path d="M14 9h8v6h-8z"></path>
                        <path
                            d="M20 3H5C3.346 3 2 4.346 2 6v12c0 1.654 1.346 3 3 3h15c1.103 0 2-.897 2-2v-2h-8c-1.103 0-2-.897-2-2V9c0-1.103.897-2 2-2h8V5c0-1.103-.897-2-2-2z">
                        </path>
                    </svg>
                    <span class="ml-3 text-white">Wallet</span>
                </a>
            </li>
            <li>
                <a href="<?= BASE_URL ?>/transactions"
                    class="flex items-center p-2 text-purple-00 rounded-lg dark:text-purple-900 hover:bg-white dark:hover:bg-blue group">

                    <svg class="w-5 h-5 text-white transition duration-75 dark:text-white group-hover:text-sky-900 dark:group-hover:text-white"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        style="fill: white; ; currentColor;transform: ;msFilter:;">
                        <path d="m15 12 5-4-5-4v2.999H2v2h13zm7 3H9v-3l-5 4 5 4v-3h13z"></path>
                    </svg>
                    <span class="ml-3 text-white">Transactions</span>
                </a>
            </li>

            <li>
                <a href="<?= ROOT_URL ?>/sign-out"
                    class="flex items-center p-2 text-white-900 rounded-lg dark:text-blue-800 hover:bg-blue-800 dark:hover:bg-blue group">
                    <svg class="w-5 h-5 text-white transition duration-75 dark:text-white group-hover:text-sky-900 dark:group-hover:text-white"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        style="fill: white; currentColor;transform: ;msFilter:;">
                        <path
                            d="M18 2H6a1 1 0 0 0-1 1v9l5-4v3h6v2h-6v3l-5-4v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z">
                        </path>
                    </svg>
                    <span class="ml-3 text-white">Log-out</span>
                </a>
            </li>

        </ul>
    </div>
    <a href="#" class="block max-w-sm p-2 flex flex-col items-center justify-center rounded-lg shadow bg-gray-300 hover:bg-grya-700 m-2">
    <p class="font-normal text-gray-800">Wallet Balance</p>
    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-500">₦ <?= number_format($wallet->balance) ?></h5>
</a>

</aside>