<?php 
  if (!isset($_SESSION['username'])) {
    $_SESSION['msg'] = "To access this page, Login is required";
    header('location: login.php');
  }  ?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: Helvetica, sans-serif; }
* {  box-sizing: border-box;}
body {  margin: 0;}

.mobile-container {     }

.topnav {  overflow: hidden;   position: relative;}

.topnav #myLinks {  display: block;  }

.dropdown .dropbtn {  font-size: small; font-weight: bolder; border: none;  outline: none;  width: 100%; 
color:#848482;  text-align:left;  padding: 15px; background-color: inherit;    margin-top: 4%;}

.dropdown-content {  display: none;   position: relative;   opacity: .6; background-color:#F5F5F5;
   width:100%;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; }

.dropdown-content a {  float: none;    padding: 12px 16px;  text-decoration: none;  width: 100%; 
  display: block;  text-align: left; margin-left: 12%; color:#006A4E; font-weight: bold; font-size: small; }

 .dropdown:hover .dropbtn {  background-color: #F5F5F5;  color:black; font-weight: bold;}

.dropdown-content a:hover {  background-color: #ddd;  color: black; width:100%;}



 .dropbtn .f { color:#006A4E; margin-right: 3%;  font-weight: bolder; font-size: large;}

 .shopping-cart .ff { color:#006A4E; margin-right: 3%;  font-weight: bolder; font-size: large;}

.dropdown:hover .dropdown-content {  display:none;}

.topnav a {    padding:15px; font-weight: bolder;   text-decoration: none;  display: block; }

.topnav a.icon {   color:#007AA5;    display:none; position:absolute;  right: 1;  top:6; padding: 10px; }



.active-aa {  background: white;  color:#006A4E; width:100%;   font-weight: bolder;  border-bottom: 2px solid whitesmoke;}
.active-aa:hover { background-color: white; opacity: .4; }

@media screen and (max-width:1500px) {
  body{font-size: small; }
  .dropdown .dropbtn{font-size: 12px;}
  .dropdown-content a{font-size: smaller;}

}


@media screen and (max-width: 600px) {
  body{font-size: small;}
  .topnav a.icon {   display: block; position:absolute;  right: 1;  top:6; padding:10px; } 
  .log{display: none;}
 .mobile-container #myLinks {display:none; } 
.mobile-container { height:auto; }
.dropdown .dropbtn {margin-top: 0%};
.dropdown-content a {font-size: x-small;}
 .dropbtn .f { color:#006A4E; margin-right:5%;  font-weight: bolder; font-size: large;}



}


</style>
</head>
<body>

<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="index.php" class="active-aa" style="font-weight:lighter;" ><i  class="fa fa-dashboard f"></i> Dashboard</a>
  <div id="myLinks">

<div class="dropdown">
<button class="dropbtn"><i class="fa fa-user f"></i> STAFFS PROFILE <i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=001profile">My Profile </a>
<a href="index.php?link=002staffaccounts">Create Account </a>
<a href="index.php?link=003managestaffs">Manage Accounts</a>
</div>
</div> 



<div class="dropdown">
<button class="dropbtn"><i class="fa fa-shopping-basket f"  style="float:left;"></i>  PRODUCTS <i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=001products">Add New Product</a>
<a href="index.php?link=002products">Manage Stock</a>
<a href="index.php?link=product-categories">Product Category</a>

</div>
</div>


<div class="dropdown">
<button class="dropbtn"><i class="fa fa-shopping-cart f"  style="float:left;"></i> SALES REPORTS <i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=101sales">Daily Report</a>
<a href="index.php?link=102sales">Monthly Report</a>
</div>
</div> 


<div class="dropdown">
<button class="dropbtn"><i class="fa fa-address-card-o  f" ></i>  RETURNED ITEMS <i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=101returned">Accept Items</a>
</div>
</div>

<div class="dropdown">
<button class="dropbtn"><i class="fa fa-money f" ></i> CASH REPORTS <i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=001report">Daily Report</a>
<a href="index.php?link=002report">Monthly Report</a>
</div>
</div> 


<div class="dropdown">
<button class="dropbtn"><i class="fa fa-address-card-o f" ></i> GOODS ON LOANS<i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=001loan">Manage Loan items</a>
</div>
</div>

<div class="dropdown">
<button class="dropbtn"><i class="fa fa-money f" ></i> TRACK RECORDS<i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=001track">Added Stock</a>
<a href="index.php?link=002track">Returned Items</a>
</div>
</div>

<div class="dropdown">
<button class="dropbtn"><i class="fa fa-money f" ></i> BRANCH REPORTS<i class="fa fa-caret-down" style="float: right;"></i></button>
<div class="dropdown-content">
<a href="index.php?link=001loan">Stock Added</a>
<a href="index.php?link=001loan">Cleared Balances</a>
<a href="index.php?link=001returned">Returned Items</a>
</div>
</div>

  
</div> 
<a href="javascript:void(0);" class="icon" onclick="myFunction_aaa()"> <i class="fa fa-bars"></i></a>
</div>


</div>

<script>
function myFunction_aaa() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

var dropdown = document.getElementsByClassName("dropbtn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}
</script>
</body></html>