<div class="w-[300px] h-screen flex flex-col justify-between shadow-lg bg-[#172554] text-white">
    <nav class="w-full p-4">
        <a href="" class="block py-2 px-8 mb-2 text-indigo-700 text-2xl font-medium">PD.io</a>
        <a href="/admin" class="block py-2 px-8 text-base rounded transition duration-200 ease-in hover:bg-indigo-900 hover:text-white flex items-center gap-1">
            <div class="text-lg">
                <i class="ph ph-users"></i>
            </div>
            Usuários
        </a>
        <a href="/admin/projects/list" class="block py-2 px-8 text-base rounded transition duration-200 ease-in hover:bg-indigo-900 hover:text-white flex items-center gap-1">
            <div class="text-lg">
                <i class="ph ph-folder-notch"></i> 
            </div>
            Projectos
        </a>
        <a href="#" class="block py-2 px-8 text-base rounded transition duration-200 ease-in hover:bg-indigo-900 hover:text-white flex items-center gap-1">
            <div class="text-lg">
                <i class="ph ph-chart-line-up"></i> 
            </div>
                Estatísticas
        </a>
        <a href="#" class="block py-2 px-8 text-base rounded transition duration-200 ease-in hover:bg-indigo-900 hover:text-white flex items-center gap-1">
            <div class="text-lg">
                <i class="ph ph-gear"></i> 
            </div>
            Definições
        </a>
    </nav>

    <div class="w-full p-4">
        <a href="#" class="block py-2 px-8 text-base rounded transition duration-200 ease-in hover:bg-indigo-900 hover:text-white flex items-center gap-1">
            <div class="text-lg">
                <i class="ph ph-sign-out"></i>
            </div>
            Sair
        </a>
    </div>
</div>