<!-- Start Sidebar -->
<div class="min-height-300 position-absolute w-100"></div>
<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-4 rounded-xl shadow-xl" style="background-color: #212121;" id="sidenav-main">
  <div class="sidenav-header">
    <i class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i>
    <a class="navbar-brand m-0" href="https://fogsmp.ml/" target="_blank">
      <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/server.png" class="navbar-brand-img h-100" alt="main_logo">
      <span class="ms-1 font-weight-bold text-blue-300">UnknownVPS</span>
    </a>
  </div>
  <hr class="horizontal dark mt-0">
  <div class="collapse navbar-collapse h-100 w-auto" id="sidenav-collapse-main">
    <ul class="navbar-nav">
      <li class="nav-item transform hover:scale-105 transition duration-300 ease-in-out">
        <a class="nav-link <%= pageName === 'Dashboard' ? 'active' : '' %>" href="/dashboard">
          <div class="icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/dash.png" class="sidebarico20">
          </div>
          <span class="nav-link-text ms-1 text-gray-300">Dashboard</span>
        </a>
      </li>
      <li class="nav-item transform hover:scale-105 transition duration-300 ease-in-out">
        <a class="nav-link <%= pageName === 'Earn' ? 'active' : '' %>" href="/earn">
          <div class="icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/coin.png" class="sidebarico20">
          </div>
          <span class="nav-link-text ms-1 text-gray-300">Earn</span>
        </a>
      </li>
      <li class="nav-item transform hover:scale-105 transition duration-300 ease-in-out">
        <a class="nav-link <%= pageName === 'Store' ? 'active' : '' %>" href="/store">
          <div class="icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/store.png" class="sidebarico20">
          </div>
          <span class="nav-link-text ms-1 text-gray-300">Store</span>
        </a>
      </li>
      <li class="nav-item transform hover:scale-105 transition duration-300 ease-in-out">
        <a class="nav-link" href="/discord">
          <div class="icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/support.png" class="sidebarico20">
          </div>
          <span class="nav-link-text ms-1 text-gray-300">Support</span>
        </a>
      </li>
      <li class="nav-item transform hover:scale-105 transition duration-300 ease-in-out">
        <a class="nav-link " href="/donate">
          <div class="icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/donate.png" class="sidebarico20">
          </div>
          <span class="nav-link-text ms-1 text-gray-300">Donate</span>
        </a>
      </li>
      <li class="nav-item mt-3">
        <h6 class="ps-4 ms-2 text-uppercase text-xs font-weight-bolder opacity-6">MISCELLANEOUS</h6>
      </li>
      <li class="nav-item transform hover:scale-105 transition duration-300 ease-in-out">
        <a class="nav-link <%= pageName === 'Profile' ? 'active' : '' %>" href="/profile">
          <div class="icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/profile.png" class="sidebarico20">
          </div>
          <span class="nav-link-text ms-1 text-gray-300">Profile</span>
        </a>
      </li>
      <li class="nav-item transform hover:scale-105 transition duration-300 ease-in-out">
        <a class="nav-link " href="https://docs.fogsmp.ml">
          <div class="icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
            <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/docs.png" class="sidebarico20">
          </div>
          <span class="nav-link-text ms-1 text-gray-300">Docs</span>
        </a>
      </li>
      <div class="my-3 mx-auto my-0">
        <hr>
        <hr>
        <hr>
        <hr>
      </div>
    </ul>
  </div>
</aside>
<main class="main-content position-relative border-radius-lg ">
  <!-- End Sidebar --> 