<style>
@media screen and (max-width: 991px) {
    .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav {
        top: 65px;
        width: 250px !important;
    }
}

@media (max-width: 420px) {
    .project-list .border-tab.nav-tabs .nav-item .nav-link {
        padding: 5px 5px 5px 0;
        font-size: 8px;
    }
}

</style>

<!-- Page Sidebar Start-->
        <header class="main-nav">
          <div class="sidebar-user text-center">
		    <img class="img-90 rounded-circle" src="task-image/<?php echo $user_photo; ?>" alt="">
			<h6 class="mt-3 f-14 f-w-600"><?php echo $user_name; ?></h6>
            <p class="mb-0 font-roboto"><?php echo $user_department ?></p>
          </div>
          <nav>
            <div class="main-navbar">
              <div class="left-arrow" id="left-arrow"><i data-feather="arrow-left"></i></div>
              <div id="mainnav">           
                <ul class="nav-menu custom-scrollbar">
                  <li class="back-btn">
                    <div class="mobile-back text-end"><span>Back</span><i class="fa fa-angle-right ps-2" aria-hidden="true"></i></div>
                  </li>
				  
				  <li class="dropdown">
				  <a class="nav-link menu-title link-nav" href="index"><i data-feather="home"></i><span>Dashboard</span></a>
				  </li>
                  
				  <?php
				  if($user_type == 'Manager')
				  {
				  ?>
				  <li class="dropdown"><a class="nav-link menu-title" href="javascript:void(0)"><i data-feather="users"></i><span>Users</span></a>
                    <ul class="nav-submenu menu-content">
                      <li><a href="user-add">Add User</a></li>
                      <li><a href="user-list">Users List</a></li>
                    </ul>
                  </li>
				  
				   <li class="dropdown"><a class="nav-link menu-title" href="javascript:void(0)"><i data-feather="bar-chart"></i><span>Reports</span></a>
                    <ul class="nav-submenu menu-content">
                      <li><a href="report-task">Task Report</a></li>
                    </ul>
                  </li>
				  <?php
				  }
				  ?>
				  
				  <li class="dropdown"><a class="nav-link menu-title" href="javascript:void(0)"><i data-feather="check-square"></i><span>Task</span></a>
                    <ul class="nav-submenu menu-content">
                      <li><a href="task-list">Task List</a></li>
                      <li><a href="task-add">Create New Task</a></li>
                    </ul>
                  </li>
				  
				  <li class="dropdown"><a href="change-password"><i data-feather="settings"></i><span>Change Password</span></a></li>
				 
				  <?php
				  if($user_id== 1 OR $user_id==22)
				  {
				  ?>
				  <li class="dropdown"><a href="role-change"><i data-feather="edit"></i><span> Role Change </span></a></li>
				  <?php
				  }
				  ?>
				  
                </ul>
              </div>
              <div class="right-arrow" id="right-arrow"><i data-feather="arrow-right"></i></div>
            </div>
          </nav>
        </header>