<style>
	.sidenav {
	    height: 100%;
	    width: 0;
	    position: fixed;
	    z-index: 1;
	    top: 0;
	    left: 0;
	    background-color:rgb(234, 234, 234);;
	    overflow-x: hidden;
	    transition: 0.5s;
	    padding-top: 60px;
	}
	.sidenav .sidenav-links{
		margin-left: -35px;
	}
  .inner-ulli{
    margin-left: -30px;
  }
    .sidenav .sidenav-links li a{
        text-decoration: none;
        font-size: 16px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    .sidenav .sidenav-links li{
    	list-style: none;
    	padding:8px 20px;
    }
    .sidenav .sidenav-links .active{
    	background-color:#575756;
    	color:white;
    }
    .sidenav .sidenav-links .active a{
    	color:white;
    }
    .sidenav .sidenav-links .active a:hover{
    	color:white;
    }
	.sidenav .sidenav-links li a:hover {
	    color:#265a88;
	    text-decoration: none;
	}

	.sidenav .closebtn {
	    position: absolute;
	    top: 0;
	    right: 25px;
	    font-size: 36px;
	    margin-left: 50px;
	}

	@media screen and (max-height: 450px) {
	  .sidenav {padding-top: 15px;}
	  .sidenav a {font-size: 18px;}
	}
</style>

<div id="mySidenav" class="sidenav hidden-lg">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" style="color:gray;position:absolute; margin-top:40px; right:5px; text-decoration: none;">&times;</a>
  <br>
  <div class="img-panel-side2" align="center" style="margin-top: 10px;">
      <?php
      $user_photo2 = $user_photo;
      if($user_photo2 == "NULL"){
        $user_photo2 = "images/female_male.jpg";
      }else{
        $user_photo2 = "userphotos/$user_photo";
      }
      ?>
      <img src="<?php echo $user_photo2; ?>" class="img-circle" width="100px;"><br>
      <span style="font-size: 16px; color:gray; font-weight: bold;">Welcome, <?php echo ucfirst($firstname); ?></span>
      <br>
    </div>
  <br>
  <ul class="sidenav-links">
    <li class="active"><a href="dashboard.php"><i class="fa fa-dashboard"></i> Dashboard</a></li>
    <li class=""><a href="myaccount.php"><i class="fa fa-user"></i> Account</a></li>
    <li><a id="transfer-funds2" style="cursor: pointer;"><i class="fa fa-refresh"></i> Transfer Funds</a></li>
    <div id="transfer-hide2">
      <ul class="inner-ulli">
        <li><a href="same-bank-transfer.php" style="font-size: 14px; font-weight: bold;"><i class="fa fa-share" ></i> To Same Bank</a></li>
       <!-- <li><a href="international-wire-transfer.php" style="font-size: 14px; font-weight: bold;"><i class="fa fa-send"></i> International</a></li>-->
        <li><a href="other-banks-transfer.php" style="font-size: 14px; font-weight: bold;"><i class="fa fa-refresh"></i> Other Banks</a></li>
      </ul>
    </div>
    <li><a href="transactions.php"><i class="fa fa-th"></i> Transaction</a></li>
    <li><a href="?loan"><i class="fa fa-money"></i> Loan</a></li>
    <li><a href="?cards"><i class="fa fa-credit-card"></i> Request Card</a></li>

    <li><a href="settings.php"><i class="fa fa-cog"></i> Settings</a></li>
    <li><a href=""><i class="fa fa-power-off"></i> Logout</a></li>
  </ul>
</div>

<script>
  $(document).ready(function(){
    $("#transfer-hide2").hide();
      $("#transfer-funds2").click(function(){
         $("#transfer-hide2").slideToggle();
      });
  });
</script>


<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>