<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 fixed-start bg-gradient-dark" id="sidenav-main">
    <div class="sidenav-header">
      <i class="fas fa-times p-3 cursor-pointer text-white 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://demos.creative-tim.com/material-dashboard/pages/dashboard " target="_blank">
        <img src="/dashboard/img/logo-ct.png" class="navbar-brand-img h-100" alt="main_logo">
        <span class="ms-1 font-weight-bold text-white"><%= username %></span>
      </a>
    </div>
    <hr class="horizontal light mt-0 mb-2">
    <div class="collapse navbar-collapse  w-auto  max-height-vh-100" id="sidenav-collapse-main">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link text-white  <%= routeName == 'home'?' active bg-gradient-primary':' ' %>" href="/home">
            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
              <i class="material-icons opacity-10">dashboard</i>
            </div>
            <span class="nav-link-text ms-1">Dashboard</span>
          </a>
        </li>
        
        <li class="nav-item">
          <a class="nav-link text-white <%= routeName == 'permissionss' || routeName == 'permissions'?' active bg-gradient-primary':' ' %>" href="/permissions">
            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
              <i class="material-icons opacity-10">table_view</i>
            </div>
            <span class="nav-link-text ms-1">Permissions</span>
          </a>
        </li>

          <li class="nav-item">
            <a class="nav-link text-white <%= routeName == 'roles' || routeName == 'role'?' active bg-gradient-primary':' ' %>" href="/roles">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">table_view</i>
              </div>
              <span class="nav-link-text ms-1">Roles</span>
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white <%= routeName == 'users' || routeName == 'user'?' active bg-gradient-primary':' ' %>" href="/users">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">receipt_long</i>
              </div>
              <span class="nav-link-text ms-1">Users</span>
            </a>
          </li>  

          <% if(role_permissions.includes('payroll')){%>
          <li class="nav-item">
            <a class="nav-link text-white <%= routeName == 'salaryslip' || routeName == 'salaryslip'?' active bg-gradient-primary':' ' %>" href="/salaryslip">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">receipt_long</i>
              </div>
              <span class="nav-link-text ms-1">Salary Slip</span>
            </a>
          </li>  
          <%}%>
       

          <% if(role_permissions.includes('user_onboarding')){%>
          <li class="nav-item">
            <a class="nav-link text-white <%= routeName == 'employee' || routeName == 'employee'?' active bg-gradient-primary':' ' %>" href="/employee">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">receipt_long</i>
              </div>
              <span class="nav-link-text ms-1">Employees</span>
            </a>
          </li>
          <%}%>

        
          <% if(role_permissions.includes('payroll')){%>
          <li class="nav-item">
            <a class="nav-link text-white <%= routeName == 'salary' || routeName == 'salary'?' active bg-gradient-primary':' ' %>" href="/salary">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">receipt_long</i>
              </div>
              <span class="nav-link-text ms-1">Salaries</span>
            </a>
          </li>
          <%}%>

          <% if(role_permissions.includes('payroll')){%>
          <li class="nav-item">
            <a class="nav-link text-white <%= routeName == 'payslip' || routeName == 'payslip'?' active bg-gradient-primary':' ' %>" href="/payslip">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">receipt_long</i>
              </div>
              <span class="nav-link-text ms-1">Payslips</span>
            </a>
          </li>
          <%}%>

        <!-- <li class="nav-item">
          <a class="nav-link text-white <%= routeName == 'punchin' || routeName == 'punchin'?' active bg-gradient-primary':' ' %>" href="/punchin">
            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
              <i class="material-icons opacity-10">receipt_long</i>
            </div>
            <span class="nav-link-text ms-1">Punch In</span>
          </a>
        </li> -->

        <li class="nav-item">
          <a class="nav-link text-white  <%= routeName == 'blogs'?' active bg-gradient-primary':' ' %>" href="/blogs">
            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
            </div>
            <span class="nav-link-text ms-1">Blogs</span>
          </a>
        </li>

      </ul>
    </div>
    <div class="sidenav-footer position-absolute w-100 bottom-0 ">
      <div class="mx-3">
        
      </div>
    </div>
  </aside>