<?php
if(!isset($relativepath)) {
	header('Location: ../index.php');
}

include "assets/scripts/globals.php"
?>


<div class="menu" id="menu">

    <ul>
<?php 

if(!($_SERVER['REQUEST_URI'] == "/construction.php")){
  for($i = 0; $i <= 17; $i++){

    echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a></li>";
  
  }
}




?>
    </ul>

</div>






<!-- librairie d'icones libres de droit font-awesome pour mettre le petit logo hamburger-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- la barre de navigation -->
<div class="topnav">
  <a href="index.php" class="active">P'tit menu :)</a>
  
  <!-- les liens (cachés par défaut) -->
  <div id="mobile_menu_links">


    <?php

    if(!($_SERVER['REQUEST_URI'] == "/construction.php")){


      for($i = 0; $i <= 17; $i = $i + 2){

        // affiche les liens 2 par 2
        echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a>
        <a href=\"".$SITE_MAP[$i+1][0]."\">".$SITE_MAP[$i+1][1]."</a></li>";
      
      }

    }
    ?>


  </div>
  <!-- appelle la fonction de changement d'etat du menu quand cliqué -->
  <a href="javascript:void(0);" class="icon" onclick="toggle_mobile_menu()">
    <i class="fa fa-bars"></i>
  </a>
</div>


<script>
    /* Change l'etat entre visible et non visible du menu déroulant */
function toggle_mobile_menu() {
  var x = document.getElementById("mobile_menu_links");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>