<?php
include "assets/lib.php";conf();
?>
<nav class="navbar navbar-default" >
	<div class="container">
      <div class="container-fluid col-xs-12 col-sm-12" style="padding: 0">
        <div class="navbar-header" style="margin: 0">
          <button type="button" class="pull-left navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="background:hidden;color: #666;border: hidden;" onClick="bt();">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar" id="ro1" style="background-color: #666;width: 45px;margin-bottom:10px;"></span>
            <span class="icon-bar" id="ro2" style="background-color: #666;width: 45px;height:1px;"></span>
            <span class="icon-bar bar-b" id="ro3" style="background-color: #666;width: 45px;height:1px;"></span>
            <span class="icon-bar" id="ro4" style="background-color: #666;width: 45px;margin-top:10px;"></span>
          </button>
          <a class="navbar-brand hidden-xs" href="home" style="padding: 0;float: right">
            <img src="assets/img/logo.png" style="height: 140px;padding: 20px;">
          </a>
          <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="home" style="height:65px;float: right;padding:0">
            <img src="assets/img/logo.png" style="height: 65px;padding: 5px;">
          </a>
        </div>
    
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding: 0;border: hidden;" align="center">
            <ul class="nav navbar-nav" style="padding: 0;margin:0" >
                <!--li><a href="index.php"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;HOME</a></li-->
            </ul>
            <ul class="nav navbar-nav navbar-right" style="padding: 0;margin:0;font-size: 18px;margin-left: 30px;line-height: 50px;" >
            	<li class="hidden-xs" style="line-height: 25px;text-align: left;margin-top: 10px;font-size: 16px;">
            	<i class="far fa-clock" style="color: #fe7a15;"></i> 10.00 - 19.00 น.<BR>
            	<i class="fas fa-map-marker-alt" style="color: #fe7a15;"></i> 10 สาขาใกล้คุณ<BR>
            	<a href="http://bit.ly/2lRZXe7" target="_blank" style="height: 24px;line-height: 24px;padding: 0"><i class="fab fa-line" style="color: #fe7a15;"></i> @yukifix</a>
            	<i class="fas fa-phone-alt" style="color: #fe7a15;"></i> 082-312-0808
				</li>
				<li class="hidden-large"><a href="home" ><i class="fas fa-home" ></i> Home</a></li>
			   <li class="hidden-large"><a href="service" ><i class="fas fa-tools"></i> บริการซ่อม</a></li>
			   <li class="hidden-large"><a href="vdo"><i class="fab fa-youtube"></i> VDO การซ่อม</a></li>
			   <li class="hidden-large"><a href="review" <i class="fab fa-facebook-messenger"></i> รีวิวลูกค้า</a></li>
			   <li class="hidden-large"><a href="blog" <i class="far fa-newspaper"></i> บทความ</a></li>
			   <li class="hidden-large"><a href="about"><i class="fas fa-user-tie"></i> About us</a></li>
				<li class="hidden-large"><a href="contact"><i class="far fa-address-card"></i> Contact us</a></li>
            </ul>
        </div>
        
      </div>
  </div><!-- /.container-fluid -->
</nav>
<div class="row hidden-xs" style="padding: 0;margin: 0;background-color: #333;color: #fff;font-weight: 400;text-align: center;">
	<div class="col-sm-2" style="padding: 10px;"><a href="home" style="color: #fff;">Home</a></div>
	<div class="col-sm-10" style="padding: 0;">
		<div class="row" style="padding: 0;margin: 0;">
			<div class="col-sm-2" style="padding: 10px;"><a href="service" style="color: #fff;">บริการซ่อม</a></div>
			<div class="col-sm-2" style="padding: 10px;"><a href="vdo" style="color: #fff;">VDOการซ่อม</a></div>
			<div class="col-sm-2" style="padding: 10px;"><a href="review" style="color: #fff;">รีวิวลูกค้า</a></div>
			<div class="col-sm-2" style="padding: 10px;"><a href="blog" style="color: #fff;">บทความ</a></div>
			<div class="col-sm-2" style="padding: 10px;"><a href="about" style="color: #fff;">About us</a></div>
			<div class="col-sm-2" style="padding: 10px;"><a href="contact" style="color: #fff;">Contact us</a></div>
		</div>
	</div>
</div>
<script>
function bt() {
  var el = document.getElementById('ro2');
  var st = window.getComputedStyle(el, null);
  var tr = st.getPropertyValue("-webkit-transform") ||
       st.getPropertyValue("-moz-transform") ||
       st.getPropertyValue("-ms-transform") ||
       st.getPropertyValue("-o-transform") ||
       st.getPropertyValue("transform") ||
       "fail...";
  if( tr !== "none") {
    console.log('Matrix: ' + tr);
    var values = tr.split('(')[1];
      values = values.split(')')[0];
      values = values.split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];
    var scale = Math.sqrt(a*a + b*b);
    var radians = Math.atan2(b, a);
    var angle = Math.round( radians * (180/Math.PI));
  } else {
    var angle = 0;
  }
  if(angle == 0){
	  document.getElementById("ro1").style.transition = "all 0.1s";
	  document.getElementById("ro2").style.transition = "all 0.5s";
	  document.getElementById("ro3").style.transition = "all 0.5s";
	  document.getElementById("ro4").style.transition = "all 0.1s";
	  
	  document.getElementById("ro1").style.opacity = 0;
	  document.getElementById("ro2").style.transform = "rotate(45deg)";
	  document.getElementById("ro3").style.transform = "rotate(135deg)";
	  document.getElementById("ro4").style.opacity = 0;
  }else{
	  document.getElementById("ro1").style.opacity = 1;
	  document.getElementById("ro2").style.transform = "rotate(0deg)";
	  document.getElementById("ro3").style.transform = "rotate(0deg)";
	  document.getElementById("ro4").style.opacity = 1;
  }

}
</script>