sidebarDashboard.ejs

<div class="h-screen">
  <div class="bg-[#23272A]">
    <aside class="h-screen w-screen md:w-full" aria-label="Sidebar">
      <div class="overflow-y-auto py-4 px-2 bg-gray-70 rounded-lg dark:bg-[#23272A]">
        <div class="server-card rounded-lg">          
          <div class="relative rounded-lg overflow-hidden h-44 m-1">
            <img class="object-cover w-full h-full" src="<%- guild.icon ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}` : `https://media.discordapp.net/attachments/984299199967408163/994026105298223206/PicsArt_22-07-05_17-44-42-657.png` %>" loading="lazy">
            <div class="absolute h-full w-full py-2 bottom-0 inset-x-0 backdrop-blur-lg">
              <img class="absolute w-24 h-24 bottom-[22%] inset-x-0 mx-auto rounded-lg border-2 border-white blur-none" src="<%- guild.icon ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}` : `https://media.discordapp.net/attachments/984299199967408163/986522852146679808/logo.png` %>" loading="lazy">
            </div>
          </div>
          <div class="grid grid-cols-3 mt-2 items-center">
            <div class="col-span-2">
              <div class="mt-2 mx-2 border-l-3 border-pink-500">
                <h5 class="text-white text-base font-medium"><%= guild.name %></h5>
              </div>
            </div>
          </div>
        </div>
        <ul class="pt-4 mt-4 space-y-2 border-t border-gray-200 dark:border-gray-700">
          <li>
            <a class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
              <i class="fas fa-users text-gray-400"></i>
              <span class="ml-3"><%= guild.memberCount %> Участников</span>
            </a>
              
            <a class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
              <i class="fas fa-hashtag text-gray-400"></i>
              <span class="ml-3"><%= guild.channels.cache.size %> Каналов</span>
            </a>
              
            <a class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
              <i class="fas fa-shield-halved text-gray-400"></i>
              <span class="ml-3"><%= guild.roles.cache.size - 1%> Ролей</span>
            </a>
          </li>
        </ul>
        <ul class="pt-4 mt-4 space-y-2 border-t border-gray-200 dark:border-gray-700">
          <li>
            <a href="/dashboard/<%- guild.id %>" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
              <i class="fas fa-sliders text-gray-400"></i>
              <span class="ml-3">Настройки</span>
            </a>
          </li>
        </ul>
        <ul class="pt-4 mt-4 space-y-2 border-t border-gray-200 dark:border-gray-700">
          <li>
            <a href="/" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
              <i class="fas fa-house text-gray-400"></i>
              <span class="ml-3">Вернуться на главную</span>
            </a>
            <a href="https://discord.gg/nacafe" target="__blank" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
              <i class="fas fa-circle-info text-gray-400"></i>
              <span class="ml-3">Сервер Поддержки</span>
            </a>
          </li>
        </ul>
      </ul>
    </aside>
  </div>
</div>

<script>
  let sidebarToggleBtn = document.querySelector("#sidebar-toggle");
  let sidebarCollapse = document.querySelector("#sidebar-collapse");
  
  sidebarToggleBtn.onclick = () => {
    sidebarCollapse.classList.toggle("hidden");
    sidebarCollapse.classList.toggle("flex");
  };
</script>